CSSOM

The CSS Object Model (CSSOM) is similar to the HTML DOM, which we described earlier. The CSSOM is an in-memory representation of the styles in the document as they are computed on elements. It is a tree-structure with nodes that mirror those in the HTML DOM, and the objects associated have a list of style properties where all CSS rules have been applied.

The CSSOM represents all the styles that have been created in the document as objects with properties that we can change with JavaScript. We can access these styles and change the values of style properties.

We mostly access these styles via the styles property of a DOM element, as here:

const boldElement = document.querySelector('.aBoldElement');

boldElement.styles.fontWeight = 'bold';

In JavaScript, we can also access the CSSOM with the getComputedStyles method on the window object; for example:

const boldElement = document.querySelector('.aBoldElement');

window.getComputedStyles(boldElement);

This will return a computed styles object for an element with the aBoldElement class attribute. This method returns a read-only styles object with all computed styles for the element.

In the next section, we will look at the different CSS selectors we can use to apply our styles to a web page.