JavaScript - computedStyleMap() method

revision: February 14, 2024

Category : element

The computedStyleMap() method of the Element interface returns a StylePropertyMapReadOnly interface which provides a read-only representation of a CSS declaration block that is an alternative to "CSSStyleDeclaration".

Syntax :

        computedStyleMap()
    

Parameters: none

Examples:

            <p>
                <a href="https://example.com">Link</a>
            </p>
            <dl id="regurgitation"></dl>
            <style>
                a {--color: red; color: var(--color);}
            </style>
            <script>
                // get the element
                const myElement = document.querySelector("a");
                // get the <dl> we'll be populating
                const stylesList = document.querySelector("#regurgitation");
                // Retrieve all computed styles with computedStyleMap()
                const allComputedStyles = myElement.computedStyleMap();
                // iterate thru the map of all the properties and values, adding a <dt> and <dd> for each
                for (const [prop, val] of allComputedStyles) {
                // properties
                const cssProperty = document.createElement("dt");
                cssProperty.appendChild(document.createTextNode(prop));
                stylesList.appendChild(cssProperty);
                // values
                const cssValue = document.createElement("dd");
                cssValue.appendChild(document.createTextNode(val));
                stylesList.appendChild(cssValue);
                }
            </script>
        

Practical examples