Watching:

How to Enhance CSS in JavaScript


show more JavaScript doesn't just make HTML more dynamic. It can also enhance your CSS too. Learn how to use the style and className properties to update CSS styles for color, width, font-weight, and more, and change the styles of a website on the fly. show less
please wait ...

CSS and JavaScript

You should of course already be using CSS to style your web pages, having a clean division between markup and presentation, just like we want a clean division between markup and behavior. And the great thing is JavaScript will allow us to make our presentation and our styles dynamic just like we can make the actual content on our HTML dynamic. And here's how we do it. The most direct way is that we can set inline styles on an element directly from JavaScript. Step one, as ever, is to grab the element using say document.getElementById, and then we use its .style property to apply a CSS style.

And what we're using here are the same styles we'd use in a CSS document. So, for example, color equals red. And any acceptable value in a CSS file can be used here in our JavaScript, so we could use, say, hexadecimal colors instead, or myElement.style.left equals 40 pixels or .style.backgroundRepeat equals repeat-x. Now, one thing to note: you do have all the usual CSS style properties available, but they might have to be written a little differently, and here's why.

So let's say we take an example of pure CSS in a CSS file. Well, it's equivalent to set in JavaScript. It looks kind of similar. We'd say myElement.style.width for width or myElement.style.color for color. But when it comes to font-weight in CSS, that becomes fontWeight in JavaScript, with the w capitalized. Same thing with background-color. So anything that would be written with a dash or hyphen in CSS becomes camelCased in JavaScript.

You remove the dash and any subsequent word becomes capitalized. Now, this is not JavaScript just being different for the sake of it. Think about it. We can't put a dash in our code. That's how we subtract in JavaScript. And because there doesn't need to be white space between our operators, JavaScript here would think we're trying to perform a subtraction. myElement.style.background-color or font-weight just wouldn't work, so we do camelCase. Now, when you're setting these properties, you always set them as a string.

And if they need units when written in CSS, you pass units in JavaScript, so notice that we have the width is equal to px for pixels. We need the leading hash, or leading pound sign if you'd prefer, for the hexadecimal colors. And one thing to take care of, if you're used to writing a lot of CSS and it's second nature to right say 230 px;, you don't want to put that semicolon inside the double quotes that you're setting the property to. Yeah, sure, we use the semicolon in JavaScript, but it's outside the quotes, to end the statement.

Now, if you have predefined classes in your CSS file and you'd like to just use JavaScript to apply an entire class to an element, we can do that too. So we had myElement.style and we can think we might have myElement.class, but here's the problem. It's not just the word class. You see, class is a special name in most programming languages. It has to do with object orientation. And even though we don't use the word class in JavaScript, it is a reserved word, and you're not allowed to use it.

So the property we actually set is className. Grab the element and set its .className property to whatever the name of your class is in your CSS file. If you need to clear it, you can actually clear just by setting it equal to an empty string. So let's see a couple of examples.

CSS and JavaScript
Video duration: 3m 46s 5h 31m Beginner

Viewers:

JavaScript doesn't just make HTML more dynamic. It can also enhance your CSS too. Learn how to use the style and className properties to update CSS styles for color, width, font-weight, and more, and change the styles of a website on the fly.

Subjects:
Developer Web
Software:
JavaScript
Author:
please wait ...