How to get list of custom CSS properties


Tags: css,variables

Problem :

I'm looking into custom CSS properties and have come up with the code below.

If I put the CSS inline using a STYLE attribute on the canvas tag (like this: style="--rgLinewidth: 3" ) then I can get the custom CSS values using the script shown below.

But using a tag, as below, then it doesn't show the custom CSS properties.

Is it possible to? And if so how?

<html>
    <head>
        <style>
            canvas#cvs {
                --rgLinewidth: 3;
                background-color: red;
            }
        </style>
    </head>
<body>

    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>

     <script>
        canvas = document.getElementById("cvs");
        styles = window.getComputedStyle(canvas);

        alert(styles.getPropertyValue('background-color'));
        alert(styles.getPropertyValue('--rgLinewidth'));

        for (var i=0; i<styles.length; i++) {
            if (canvas.style[i].indexOf('--rg') === 0) {
                var value = styles.getPropertyValue(canvas.style[i]);
                alert([canvas.style[i], value]);
            }
        }
    </script>
</body>
</html>


Solution :

It does not work because you query for computed style and then attempt to retrieve values of corresponding properties from the inline style, where they do not exist -- your canvas does not define an inline style. You need to query the values through the same styles object where you find the properties.

Consider the following function which when passed an element, will search through its computed style and return the value of the first CSS variable whose name starts with --rg:

function find_first_rg_value(el) {
    var styles = getComputedStyle(el);
    for (var i = 0; i < styles.length; i++) {
        if (styles[i].startsWith('--rg')) {
            return styles.getPropertyValue(styles[i]);
        }
    }
}

(Use like find_first_rg_value(canvas))

The difference between my approach and yours is, as I said, that you attempt to fetch the value from canvas.style[i], but canvas.style is effectively empty. Use styles instead.

Computed style (getComputedStyle), as the name implies, contains "summary" style computed per CSS cascading, inheriting, and so on, with inline style, if any, applied on top (overriding priority). Assigning inline style therefore affects the computed style, but querying inline style only gives you inline style you assigned, no more.

This means that in most cases like yours one would want to use getComputedStyle. Additionally, since CSS variables cannot be queried using style.fontName syntax, you need to use getPropertyValue function for these (all dashes intact in the passed property name), regardless if you are dealing with an inline or computed style object.


    CSS Howto..

    How to use another brackets/tabs policy for my CSS?

    How To Create SubMenu in Drop Down (HTML/CSS)

    How to use Bootstrap Glyphicons in Holder.js images

    How to style a table-like div with css? How to fill a “column”?

    How do I inspect CSS pseudo classes with firebug?

    How to grows up a div height with a table that has your rows added dynamically?

    How to use relative referencing in CSS files

    How to make an external HTML file not appear in the home page?

    How to make a sticky footer using CSS?

    CSS - how to position content data-title

    How do I use transitionend in jQuery?

    How to make the CSS width property go from bottom to top

    How do I adjust triangle in css price tag to the right size

    How can i have CSS3 animating menu like followbubble.com

    How to create a CSS box link without using display: block

    CSS: How to set several div's in one line with 100% width?

    HTML+CSS: How to add shadow (as image) to image?

    How can I adjust this carousel to only pause when user mouses over one of the boxes?

    How to fix clipped text over 3D transform image on Safari?

    How to create a similar background to this one

    How can I integrate the code from this pen onto my site?

    How to copy external CSS and JavaScript in XSLT

    How Float divs like twitter?

    How to create a simple Modal Dialog Box in JQuery?

    Using Bootstrap, how do i achieve this horizontal tab layout? [closed]

    How can I transcend my confusion over CSS?

    Javascript jQuery only shows Image element once in IE. FF works

    How can browsers resolve icon libraries that aren't specifically referenced in the frontend code?

    how to make this slide menu work

    overlaping text with different styles over image, prevent text of one style to be shown on top of the text of another style