- [Instructor] In addition to working directly with elements through attributes on their content, JavaScript is also often used to apply custom CSS to elements. This could be to add an effect, or highlight, or change the visible state of an element when something happens on a page or something altogether different. The possibilities here are only limited by your imagination and what CSS can do. When we apply styles to an element using JavaScript the browser adds inline CSS to that element by accessing the style attribute in the dunk. JavaScript does not write to our standalone style sheets or any other CSS on the page.
We're always working with the individual element. These inline styles are stored in the style property, which can be accessed like any other element property. If I want to see what inline styles are applied to an element, I simply call that element. In return, I get a CSS style declaration list, that lists out every possible property that could be applied using inline styles and also any values that are applied to this particular element.
In this case, there are currently no inline CSS properties. It's important to remember here, you're only getting the inline styles for this particular element. The styles that are being applied from an external style sheet, or even internal styles in the head, do not show up here because JavaScript is just requesting the element and looking up what's inside the element. And in this case, we're looking at the style property, which maps to the style attribute in the element itself. We can work with this style property directly by assigning new style rules to it.
This can be done in a couple different ways. If you want to assign a specific style property, you can target it directly. So document query selector cta a style dot and then say color. If you want to change the text color and set it to a value like green. Text turns green, and if we go over to the elements inspector, you can see here, now we've created a new style attribute that has the value color colon green semicolon. This works for all CSS properties.
However, there's a caveat. If a CSS property's name has a hyphen in it, it becomes camelCase in JavaScript. For example, if I want to apply a new background color, I would say style dot background color camelCased. Then set the background color to blue, maybe. When I do, the background color turns blue. The green color stays for the font. And if we go back and look at the element, you'll see what we've actually done is changed the value inside the style attributes to color colon green semicolon background color colon blue.
The advantage of this method is you're only modifying the specific style property, not the whole string inside the style attribute. That means, I can now go back and change style color to purple. This only changes the text color, not the background color value, even though I'm technically changing this entire string inside the style attribute. The disadvantage to this approach is if you want to add multiple style properties, you have to do so in individual statements.
As an alternative, you can group your style properties together in a single string, replacing whatever inline styles are already applied. This is done using the CSS text property. So document query selector style dot CSS text, and then we can provide a string of pure CSS properties. So padding 1em, color white, background color red.
And what you see here is I'm actually just typing out CSS exactly how I would do it if I was working in style sheet, apply it, and effectively, we're just replacing the entire value in the style attribute. This hints at something really interesting. When we work with inline CSS, the style property is not our only option. If we take a step back and look at what an inline CCS rule is, a different approach emerges. As you can see here, the inline CSS is an attribute, specifically the style attribute, and the value is set to a semicolon-separated list of CSS properties and values.
That means, we can use the hasAttribute, getAttribute, setAttribute, and removeAttribute methods to interact with these inline styles. Let's see how that works. I'll set it up the same way: document query selector, cta a only this time, I'll use the setAttribute method. I'll set the style attribute to padding 2em.
Here, the attribute is style, and the value is the CSS property followed by a colon, followed by its value. What we're effectively doing here is going into the element, and replacing the existing style attribute and its value with a new one. So that means we remove everything we added previously. That means, just like with the property itself, if I want to add a long string of different CSS properties, I simply add in the long string here in the value for the style attribute.
And all of these are applied simultaneously. Before I leave you with this, one caveat. Inline styles override whatever the style sheet is doing, which can be problematic. If you're using JavaScript to apply basic style changes, it is usually better to create a custom CSS rule targeting class selectors, and adding or removing these classes from the element instead. It's cleaner, easier to manage, and preserves the separation between content, presentation and interactivity, we talked about in the very beginning of the course.
That said, there are times when using inline styles make sense, especially if those styles are dynamically updated on the fly in the browser. The best way to find out what works for your particular scenario is to try both options and see if a class can do the job of an inline style.
Updated
4/1/2019Released
5/17/2017Through practical examples and mini-projects, this course helps you build your understanding of JavaScript piece by piece, from core principles like variables, data types, conditionals, and functions through advanced topics including loops, closures, and DOM scripting. Along the way, you will also be introduced to some ES6 and the basics of JavaScript libraries.
- What is JavaScript?
- Working with data
- Using functions and objects
- Working with JavaScript and the DOM
- Changing DOM elements
- Handling events
- Working with loops
- Making images responsive using markup
- Troubleshooting code
- Validating functionality
- Minifying JavaScript
Share this video
Embed this video
Video: Apply inline CSS to an element