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.
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.
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.
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.
- Working with data
- Using functions and objects
- Changing DOM elements
- Handling events
- Working with loops
- Making images responsive using markup
- Troubleshooting code
- Validating functionality