Updating style with Javascript
Testing is great, but let's face it not the most fun part of front-end development. Manipulating elements' style with Javascript, now that's something way more enjoyable. Let's have a look at the different techniques at our disposal.
Doing it with style
The first things that comes to mind is probably to use the element's style property (vendor prefixed one included). It contains an object representing the properties defined in the style attribute. Way easier to handle than updating the style attribute directly.
Say you want to highlight a field in a form because it contains invalid input, you would go:
var loginField = document.querySelector('[name="login"]');
loginField.style.color = #f00;
Easy for one or two property, it becomes a little more tedious with multiple properties (though things like Underscore's extend() can help here). But this is not the main issue with this approach.
Styles set using this method have the highest specificity possible. This means they will override anything set in your stylesheet and won't play well with the style declarations you have there.
This also puts presentation bits in the Javascript, which makes things harder to maintain. If bits of styling are in the Javascript and bits are in the CSS, it becomes hard to know where to look when you need to, say, update the color of invalid inputs.
Having some class
A method I find more maintainable is to keep the style defined in the stylesheets and use the Javascript to set specific classes:
.field-invalid {
color: red;
}
var loginField = document.querySelector('[name="login"]');
loginField.classList.add('field-invalid');
This makes the Javascript focused on the logic of the application: marking that the field is invalid. And it leaves the styling of the fields marked as invalid to the CSS.
This also allows to take advantage of the CSS selectors to do multiple presentation updates at once. For example, by setting a class on the <body>, you could show and hide multiple elements at once. Way simpler than having to search for each element with Javascript and update its style attribute accordingly. Plus you can also do crazy stuff with ::before and ::after pseudo-elements.
There are times, though, when the classes approach will fail. When the styles you want to update are computed at runtime by your Javascript (eg. the width of a progress bar) and you can't plan in advance what they will be. In this case, falling back to the style attribute is your best option.
Wrapping it up
To update styles using Javascript, marking elements with classes and keeping the presentation in the stylesheets make things easier to maintain. For the times when the styles are too dynamic, the style attribute provides a good fallback. Definitely simpler than inserting <style> elements to keep working with classes.