1

How do you access the value of the CSS property --chrome-background-color that is set on #titlebar of the Firefox chrome in an addon from javascript?

I tried the variants:

document.getElementById( 'titlebar' ).style.backgroundColor // undefined document.getElementById( 'titlebar' ).style['--chrome-background-color] // undefined

Centril
  • 2,549
  • 1
  • 22
  • 30

1 Answers1

2

This worked:

window.getComputedStyle( document.getElementById('titlebar') ).getPropertyValue( '--chrome-background-color' )

From: Get a CSS value with JavaScript

Lesson: don't be hasty + it works for mozilla specific chrome elements.

Community
  • 1
  • 1
Centril
  • 2,549
  • 1
  • 22
  • 30
  • Wow very itneresting on that `--chrome-backbround-color` i never would have guessed that. Whey did you need that `--chrome-` part? Can't you just do the rgulard `backround-color`? – Noitidart Aug 22 '15 at 23:22
  • 1
    It doesn't work with `background-color`, just confirmed it. You can try it with `ctrl+shift+alt+i` and then inspect `TabsToolbar`, and remove the `--chrome` part and the background will be messed up. Remember that you are modifying the chrome, that is using XUL, not HTML for the most part. – Centril Aug 22 '15 at 23:29
  • Very interesting! Thanks Centril! – Noitidart Aug 23 '15 at 06:38
  • Ah it seems this method makes it `getComputedStyle`, so this is just a shim for https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle – Noitidart Aug 23 '15 at 18:57