JavaScript Styles and Classes

Before we get to JavaScript ways of dealing with styles and classes – here’s an important rule. Hopefully it’s obvious enough, but we still have to mention it.

There are generally two ways to style an element:

  1. Create a class in CSS and add it: <div class="...">
  2. Write properties directly into style<div style="...">.

CSS is always the preferred way – not only for HTML, but in JavaScript as well.

We should only manipulate the style property if classes “can’t handle it”.

For instance, style is acceptable if we calculate coordinates of an element dynamically and want to set them from JavaScript, like this:

For other cases, like making the text red, adding a background icon – describe that in CSS and then apply the class. That’s more flexible and easier to support.

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 strings 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 classes.

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") – if the class exists, then removes it, otherwise adds it.
  • elem.classList.contains("class") – returns true/false, checks for the given class.

Besides that, classList is iterable, so we can list all classes 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 as if we had in the attribute style="width:100px".

For multi-word property the camelCase is used:

For instance:

Prefixed properties

Browser-prefixed properties like -moz-border-radius-webkit-border-radius also follow the same rule, for instance:

That is: a dash "-" becomes an uppercase.

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 line to it: elem.style.display = "".

If we set display to an empty string, then the browser applies CSS classes and its built-in styles normally, as if there were no such style property at all.

Full rewrite with style.cssText

Normally, we use style.* to assign individual style properties. We can’t set the full style like div.style="color: red; width: 100px", because div.style is an object, and it’s read-only.

To set the full style as a string, there’s a special property style.cssText:

We rarely use it, because such assignment removes all existing styles: it does not add, but replaces them. May occasionally delete something needed. But still can be done for new elements when we know we don’t delete something important.

The same can be accomplished by setting an attribute: div.setAttribute('style', 'color: red...').

Mind the units

CSS units must be provided in style values.

For instance, we should not set elem.style.top to 10, but rather to 10px. Otherwise it wouldn’t work:

Please note how the browser “unpacks” the property style.margin in the last lines and infers style.marginLeft and style.marginTop (and other partial margins) from it.

Computed styles: getComputedStyle

Modifying a style is easy. But how to read it?

For instance, we want to know the size, margins, the color of an element. How to do it?

The style property operates only on the value of the "style" attribute, without any CSS cascade.

So we can’t read anything that comes from CSS classes using elem.style.

For instance, here style doesn’t see the margin:

But what if we need, say, to increase the margin by 20px? We want the current value for the start.

There’s another method for that: getComputedStyle.

The syntax is:

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 style properties, like elem.style, but now with respect to all CSS classes.

For instance:

Computed and resolved values

There are two concepts in CSS:

  1. computed style value is the value after all CSS rules and CSS inheritance is applied, as the result of the CSS cascade. It can look like height:1em or font-size:125%.
  2. resolved style value is the one finally applied to the element. Values like 1em or 125% are relative. The browser takes the computed value and makes all units fixed and absolute, for instance: height:20px or font-size:16px. For geometry properties resolved values may have a floating point, like width:50.5px.

A long time ago getComputedStyle was created to get computed values, but it turned out that resolved values are much more convenient, and the standard changed.

So nowadays getComputedStyle actually returns the resolved value of the property.

getComputedStyle requires the full property name

We should always ask for the exact property that we want, like paddingLeft or marginTop or borderTopWidth. Otherwise the correct result is not guaranteed.

For instance, if there are properties paddingLeft/paddingTop, then what should we get for getComputedStyle(elem).padding? Nothing, or maybe a “generated” value from known paddings? There’s no standard rule here.

There are other inconsistencies. As an example, some browsers (Chrome) show 10px in the document below, and some of them (Firefox) – do not:

“Visited” links styles are hidden!

Visited links may be colored using :visited CSS pseudoclass.

But getComputedStyle does not give access to that color, because otherwise an arbitrary page could find out whether the user visited a link by creating it on the page and checking the styles.

JavaScript we may not see the styles applied by :visited. And also, there’s a limitation in CSS that forbids to apply geometry-changing styles in :visited. That’s to guarantee that there’s no sideway for an evil page to test if a link was visited and hence to break the privacy.

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.
Spread the love
  • 13
    Shares
  • 13
    Shares

Leave a Reply

Your email address will not be published. Required fields are marked *