From the course: JavaScript: Enhancing the DOM

Unlock this course with a free trial

Join today to access over 25,300 courses taught by industry experts.

Inline styles with JavaScript

Inline styles with JavaScript

From the course: JavaScript: Enhancing the DOM

Start my 1-month free trial Buy for my team

Inline styles with JavaScript

“

- [Instructor] Sometimes you may want to directly apply styles to an element. When this is part of the HTML, it's typically not what you want. Adding it to a very specific element for JavaScript can perhaps be a reasonable use case. And we can do this. It can be done using the style property. So I'm not sure how fresh your CSS is at this point, of course, but what CSS actually is displayed on an element doesn't need to be what's in the CSS file. Also, a CSS file or multiple ones can have contradicting styles. Text cannot be purple and yellow, for example. So one of those charts would have to be more important than the other. So which one to choose? Well, that depends on the specificity, and I'm not going to explain the entire specificity rules here. All that I want to stress is that inline styling has a crazy high specificity and therefore wins. So applying style this way is very effective. And here's how to do it. Again, you need to select the element first. In this example, the…

Contents