Working with CSS

The CSS Object Model is a set of APIs allowing the manipulation of CSS from JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows users to read and modify a CSS style dynamically.

There are 3 ways to access CSS in JavaScript.


RESETRUNFULL
<!DOCTYPE html><html><head>
    <style>
        p{
            color:red;
        }
    </style>
    <style>
        p{
            border:1px solid brown;
        }
        body {
            background: yellow;
        }
    </style>
    </head><body><p style="background: orange;">
    And the bartender says, "Success, but you're not ready!" So a JavaScript function walks into a bar.</p><script>    // Method 1: getComputedStyle()
    var ele = document.getElementsByTagName("p")[0];
    var style = getComputedStyle(ele);  // read-only
    console.log(style.cssText); //(all the properties & values)
    console.log(style.length);       // 280
    console.log(style.parentRule);   // null
    console.log(style.getPropertyValue("font-size")); // 16px
    console.log(style["font-size"]);   // 16px
    console.log(style["fontSize"]);   // 16px
    console.log(style.fontSize);       // 16px
    console.log(ele.style.fontSize);//(empty string),not inlineconsole.log(ele.style.getPropertyPriority("font-size"));                                                 // (empty string),not inline// style.setProperty("color","blue","important");                                            // DOMException    // Method 2: element.style.X
    ele.style.fontSize = "17px";
    console.log(ele.style.fontSize);   // 17px
  ... inline now
    console.log(ele.style.color);   // (empty string),not inline
    console.log(ele.style.background);   // orange
    ele.style.setProperty("color","blue","important");
    console.log(ele.style.color);   // blue
    ... inline now
    console.log(ele.style.getPropertyPriority("color"));                                                  // "important"    // Method 3: document.stylesheets[].cssRules[]
    console.log(document.styleSheets[0].cssRules[0].cssText);                                                // p {color:red !important;}console.log(document.styleSheets[0].cssRules[0].style.color);                                             // redconsole.log(document.styleSheets[1].cssRules.length);                                            // 2 ... ie. for <p> and <body>console.log(document.styleSheets.length);                                            // 2
  .. two <style> elementsconsole.log(document.styleSheets[0].cssRules[0].type);                                            // 1 (ie. .STYLE.RULE)
    console.log(style.item(3));   // animation-fill-mode
    console.log(style[3]);   // animation-fill-mode</script></body></html>
Type Value
CSSRule.STYLE_RULE 1
CSSRule.IMPORT_RULE 3
CSSRule.MEDIA_RULE 4
CSSRule.FONT_FACE_RULE 5
CSSRule.PAGE_RULE 6
CSSRule.KEYFRAMES_RULE 7
CSSRule.KEYFRAME_RULE 8
Reserved for future use 9
CSSRule.NAMESPACE_RULE 10
CSSRule.COUNTER_STYLE_RULE 11
CSSRule.SUPPORTS_RULE 12
CSSRule.DOCUMENT_RULE 13
CSSRule.FONT_FEATURE_VALUES_RULE 14
CSSRule.VIEWPORT_RULE 15
CSSRule.REGION_STYLE_RULE 16
A CSSRule of type STYLE_RULE implements a rule-specific interface of CSSStyleRule, and so on.
Get all CSS rules for the document using Array methods.
RESETRUNFULL
const allCSS = [...document.styleSheets]
  .map(styleSheet => {
    try {
      return [...styleSheet.cssRules]
        .map(rule => rule.cssText)
        .join('');
    } catch (e) {
       console.log('Access to stylesheet %s is denied. Ignoring...',
        styleSheet.href);
    }
  })
  .filter(Boolean)
  .join('\n');

(https://developer.mozilla.org/en-US/docs/Web/API/
  StyleSheetList)