Styles and classes

className and classList

Changing a class is one of the most often used actions in scripts. In the ancient time, there was a limitation in JavaScript: a reserved word like “class” could not be an object property. That limitation does not exist now, but at that time it was impossible to have a “class” property, like elem.class. So for classes the similar-looking property “className” was introduced: the elem.className corresponds to the “class” attribute. For instance: If we assign something to elem.className, it replaces the whole string of classes. Sometimes that’s what we need, but often we want to add/remove a single class. There’s another property for that: elem.classList. The elem.classList is a special object with methods to add/remove/toggle a single class. For instance: So we can operate both on the full class string using className or on individual classes using classList. What we choose depends on our needs. Methods of classList: - elem.classList.add/remove(“class”) – adds/removes the class. - elem.classList.toggle(“class”) – adds the class if it doesn’t exist, otherwise removes it. - elem.classList.contains(“class”) – checks for the given class, returns true/false. Besides, classList is iterable, so we can list all classes with for..of, like this:

Element style

The property elem.style is an object that corresponds to what’s written in the “style” attribute. Setting elem.style.width=“100px” works the same as if we had in the attribute style a string width:100px. For multi-word property the camelCase is used: For instance: button.style.MozBorderRadius = ‘5px’; button.style.WebkitBorderRadius = ‘5px’;

Resetting the style property

Sometimes we want to assign a style property, and later remove it. For instance, to hide an element, we can set elem.style.display = “none”. Then later we may want to remove the style.display as if it were not set. Instead of delete elem.style.display we should assign an empty string to it: elem.style.display = “”. If we set style.display to an empty string, then the browser applies CSS classes and its built-in styles normally, as if there were no such style.display property at all. Also there is a special method for that, elem.style.removeProperty(‘style property’). So, We can remove a property like this:

Mind the units

Don’t forget to add CSS units to values. For instance, we should not set elem.style.top to 10, but rather to 10px. Otherwise it wouldn’t work: Please note: the browser “unpacks” the property style.margin in the last lines and infers style.marginLeft and style.marginTop from it.

Computed styles: getComputedStyle

element

Element to read the value for. pseudo

A pseudo-element if required, for instance ::before. An empty string or no argument means the element itself. The result is an object with styles, like elem.style, but now with respect to all CSS classes. For instance:

Summary

To manage classes, there are two DOM properties:

• className – the string value, good to manage the whole set of classes.
• classList – the object with methods add/remove/toggle/contains, good for individual classes. To change the styles:
• The style property is an object with camelCased styles. Reading and writing to it has the same meaning as modifying individual properties in the “style” attribute. To see how to apply important and other rare stuff – there’s a list of methods at MDN.
• The style.cssText property corresponds to the whole “style” attribute, the full string of styles. To read the resolved styles (with respect to all classes, after all CSS is applied and final values are calculated):
• The getComputedStyle(elem, [pseudo]) returns the style-like object with them. Read-only.

let top = /* complex calculations */;
let left = /* complex calculations */;

elem.style.left = left; // e.g '123px', calculated at run-time
elem.style.top = top; // e.g '456px'