CSSOM

CSS Object Model (CSSOM) is the browser API that represents the CSS used by a document as a manipulable in-memory tree. It provides a structured interface for reading and modifying the stylesheets and their rules at runtime, separate from the rendering and layout processes. The CSSOM is used by scripts to inspect or alter CSS rules, enabling dynamic styling without reloading the page.

Core concepts and objects include the CSSStyleSheet, CSSRuleList, and CSSRule. The document exposes stylesheets via document.styleSheets, a list of CSSStyleSheet objects. Each stylesheet has a cssRules list (or rules in some environments), which contains objects such as CSSStyleRule (a regular selector with a declaration), CSSMediaRule (for @media blocks), CSSFontFaceRule, and other rule types used to describe CSS. The style declarations associated with a rule are accessible through a CSSStyleDeclaration, which provides properties corresponding to CSS properties (for example, backgroundColor, color, fontSize).

Reading and writing through the CSSOM allows scripts to examine a stylesheet’s selectors and properties and to modify them by updating a rule’s style object. Changes to the CSSOM affect the applied styles after a reflow, similar to how edits in a stylesheet would impact rendering. It is important to distinguish between the CSSOM and computed styles: computed styles (as returned by getComputedStyle) reflect the final values after all cascading and inheritance, while the CSSOM represents the source rules that may influence those values.

Security and cross-origin considerations apply: accessing the cssRules of a stylesheet loaded from a different origin may be restricted and can raise a security error unless proper CORS permissions are in place. CSSOM is defined by the CSS Object Model specification and is implemented variably across browsers, with ongoing standardization and vendor-prefixed behaviors diminishing over time.