0

CSS

<style scoped>

  body  {
    --main-colour: "deep-purple"
  }
  
  :root {
    --main-colour: "deep-purple"  
  }

Javascript

            colour() {
                console.log(getComputedStyle(document.documentElement).getPropertyValue('--main-colour'))
                console.log(getComputedStyle(document.body).getPropertyValue('--main-colour'))
                console.log(document.documentElement.style.getPropertyValue('--main-colour'))
            }

Problem

After looking on various posts, it seems I should be able to access my CSS variable from within the javascript, but it's not being found...on some posts I've seen the getComputedStyle pointing at various different elements so I've tried all that I've seen, and also put the variable inside the body rather than the :root (the latter seeming to be the convention), but still not getting any joy.

<empty string>
<empty string>
Community
  • 1
  • 1
Chris A
  • 863
  • 1
  • 10
  • 31
  • 3
    Hm, the only reason I can think of is the `scoped` attribute of your ` – Ryuno-Ki Feb 29 '20 at 16:57
  • Yes, you were right. I did think it may be related but it seems I hadn't refreshed when I tried it before...oops – Chris A Feb 29 '20 at 17:00

0 Answers0