Retrieve Custom CSS Property Value with JavaScript - Must not be possible

Question

The goal is to define a custom CSS property value in an external style sheet.

External CSS:

#myDiv {
  --myCustomProperty: 'myCustomValue';
}

Markup:

<html>
    <div id='myDiv'></div>
</html>

There is nothing in the CSS spec that says custom properties are invalid. However, the browser will render them as invalid, but they should, in theory, still be available by window.getComputedStyle or similar. Firebug shows the custom property and its value in the styles pane but its marked as overwritten.

Following snippet from: http://www.quirksmode.org/dom/getstyles.html

JavaScript:

function getStyle(el,styleProp) {
    var x = document.getElementById(el);
    if (x.currentStyle)
      var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
      var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
      return y;
}

var value = getStyle('myDiv', '--myCustomProperty');

alert(value);

Output should be the string "myCustomValue"

@misaq Primary browser is Ch38 but have also tested in FF and IE various versions. — JavaScript_is_4_Real_men, Oct 23 '14 at 04:31
@JanR Allow users to set custom properties in style sheets instead of in HTML. Basically send data from a style sheet to a script without walking the CSS. — JavaScript_is_4_Real_men, Oct 23 '14 at 04:52
I am just going through some docs, and based on what I read only firefox might support your css example. I'll try an example below..hang on — JanR, Oct 23 '14 at 05:04
check [this](http://stackoverflow.com/questions/8811027/get-elements-custom-css-properties-mystyle-using-javascript) on why this does not work in Chrome and IE 11 and how it can be worked around. — Mehdi Haghgoo, Oct 23 '14 at 05:21
[this](http://stackoverflow.com/questions/8811027/get-elements-custom-css-properties-mystyle-using-javascript) says that css values not used by the browser are discarded, but you can still use custom **attributes** instead, e.g. `
` — Mehdi Haghgoo, Oct 23 '14 at 05:37
@misaq Ok but this is slightly off topic because it needs to be set in the external style sheet, not in markup. — JavaScript_is_4_Real_men, Oct 23 '14 at 05:48

Mehdi Haghgoo · Answer 1 · 2014-10-23T05:46:18.463

0

This should work (Tested in Firefox 32).

    <html>
<head>

<style>
#myDiv {
  --myCustomProperty: 'myCustomValue';
}
</style>
</head>
<body>
<div id='myDiv'></div>
<script>
function getStyle(el,styleProp) {
    var x = document.getElementById(el);
    if (x.currentStyle)
      var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
      var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
      return y;
}

var value = getStyle('myDiv', '--myCustomProperty');

alert(value);
</script>
</body>
</html>

http://jsfiddle.net/tugvgs1z/1/ However, this does not work in Chrome and IE 11. There is a good discussion on CSS custom-property API on link.

edited Oct 23 '14 at 05:46

answered Oct 23 '14 at 04:44

Mehdi Haghgoo

3,144
7
46
91

@misaq Nice catch on that typo but mine won't work. Which browser? – JavaScript_is_4_Real_men Oct 23 '14 at 04:48
@misaq Don't know?? Wasn't me. – JavaScript_is_4_Real_men Oct 23 '14 at 04:48
Firefox. Just check the fiddle link I put there. – Mehdi Haghgoo Oct 23 '14 at 04:48
I downvoted as it still returns null and not the "myCustomValue" – JanR Oct 23 '14 at 04:48
Doesnt' work in chrome, from what I can tell chrome is actually not reading the style on the dom element: it's listed as: 0: CSSStyleRulecssText: "#myDiv { }" – JanR Oct 23 '14 at 04:56

score 0 · Answer 2 · edited May 23 '17 at 11:49

As discussed, maybe this will help you:

You could store the custom properties for elements in a .json file which you let people edit.

the structure could be something like:

{
    "element": 'myDiv',
    "properties": [
            {
                "propertyName": 'SomeName',
                "propertyValue" : 'SomeValue'
            },
            {
                "propertyName" : 'SomeOtherName',
                "propertyValue"  : 'SomeOtherValue'
            },

        ]

    }

You would then need to write a javascript function to find the correct value with the property for any given element. This will at least work in all browsers.

Examples of searching the json object can be found here: Searching JSON objects with JQuery

and you can load the json file into a variable using these methods: Loading local JSON file

It's probably still not an ideal solution, but it would work across browsers.

Sounds good. Although not exactly what I was hoping for, it will serve as a possible fallback solution. — JavaScript_is_4_Real_men, Oct 23 '14 at 05:23
it's difficult without completely understanding what you are trying to achieve. but the css option is definately not viable at this stage until the other browsers are on board — JanR, Oct 23 '14 at 05:24

Retrieve Custom CSS Property Value with JavaScript - Must not be possible

2 Answers2