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 make a ghost element in CSS?

    How do I have a CSS classes priority be affected by what class it is “more closely” inside?

    How to specify correct output folder for CSS using SASS & LiveReload?

    How to adjust the height of a Bootstrap accordion

    how to select a Div ID that does not have a specifc class/es

    How to make diagonal div

    How would I generate a css, js and html file using php?

    How to make the submenu to be at the same horizontal as its parent's menu with this css?

    How does tablesort.js create the sort indicator arrows

    How to shield a HTML tag from CSS?

    How do you change the background opacity in CSS?

    How Can I Make An Odd Shaped Icon into a “Circle”?

    How to open links in a new tab/window using CSS? [duplicate]

    How to make a floating page div responsive

    How to target individually nested elements using CSS

    Buttons on bootstrap timepicker is not showing

    Can someone tell me how to implement this Javascript? HTML CSS

    How to position a vertical menu as nested
      under horizontal parent

    How to apply css logic [duplicate]

    How to add padding to a ul/li menu with a background image?

    CSS3: How to add more than 2 CSS Ribbon effects to same banner?

    How to get rid of spacing between Bootstrap panels?

    How to vertically align div text?

    How can I get a very “blurred” box-shadow out of only the bottom of the box?

    How do I force span elements to remain in place between variable length text and an image element?

    how do I float a div over a background image in a different div

    how to remove and add classes using same function? [closed]

    How to remove property from a child element?

    How to keep an image and text (vmax font) aligned when resizing browser?

    How to make a background color stretch to left and right of viewport in Safari Browsers