0

I have defined some styles in the :root and global namespace. But when I try to access them programmatically I am getting an error:

TypeError: Window.getComputedStyle: Argument 1 does not implement interface Element.

Here is my style rule: 

:root {
    --my-css-variable: green; 
}

Here is what I have tried: 

var variable = "--my-css-variable";


// all of the following error
window.getComputedStyle(window).getPropertyValue(variable);
window.getComputedStyle(window.document).getPropertyValue(variable);
window.getComputedStyle(window.document.body).getPropertyValue(variable);

enter image description here When I select an element on the page and look in debug tools it says element is inheriting from HTML:

enter image description here

1.21 gigawatts
  • 16,517
  • 32
  • 123
  • 231

1 Answers1

1

You could try:

getComputedStyle(document.documentElement)
    .getPropertyValue('--my-css-variable');
Shraddha
  • 791
  • 7
  • 13