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
– Rakesh_Kumar, Commented Feb 20, 2015 at 12:33
possible duplicate of CSS & Javascript: Get a list of CSS custom attributes — Banana
– Banana, Commented Feb 20, 2015 at 12:40

Community · Accepted Answer · 2017-05-23 12:06:27Z

1

Thanks Rakesh!

I got it:

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

CommunityBot

11 silver badge

answered Feb 20, 2015 at 13:26

ceving

24.1k15 gold badges120 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1