How to access Cascading Variables from JavaScript?

Question

I have defined a style sheet using Cascading Variables.

:root {
        --media: narrow;
}

@media all and (min-width: 30rem)
{
        :root {
                --media: wide;
        }
}

Firefox understands this and shows me the property in the Inspector.

But how to read it from JavaScript?

I tried it with jQuery 2.1.3 but it does not seem to work:

$('html').css('--media')
undefined
$('html').css('media')
undefined
$(':root').css('media')
undefined

Which native function I have to use?

`window.getComputedStyle(element, ':root').getPropertyValue('--media');` ? — Rakesh_Kumar, Feb 20 '15 at 12:33
possible duplicate of [CSS & Javascript: Get a list of CSS custom attributes](http://stackoverflow.com/questions/7251804/css-javascript-get-a-list-of-css-custom-attributes) — Banana, Feb 20 '15 at 12:40

score 0 · Accepted Answer · edited May 23 '17 at 12:06

0

Thanks Rakesh!

I got it:

window.getComputedStyle(document.body, ':root')
      .getPropertyValue('--media')
      .trim()

edited May 23 '17 at 12:06

Community

answered Feb 20 '15 at 13:26

ceving

1 Answers1