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
– JavaScript_is_4_Real_men, Commented Oct 23, 2014 at 4:31
check this on why this does not work in Chrome and IE 11 and how it can be worked around. — Mehdi Haghgoo
– Mehdi Haghgoo, Commented Oct 23, 2014 at 5:21

Community · Accepted Answer · 2017-05-23 11:49:37Z

0

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.

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Oct 23, 2014 at 5:19

JanR

6,1303 gold badges25 silver badges30 bronze badges

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

2 Comments

JavaScript_is_4_Real_men Over a year ago

Sounds good. Although not exactly what I was hoping for, it will serve as a possible fallback solution.

JanR Over a year ago

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

Mehdi Haghgoo · Accepted Answer · 2014-10-23 05:46:18Z

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, 2014 at 5:46

answered Oct 23, 2014 at 4:44

Mehdi Haghgoo

3,5249 gold badges56 silver badges102 bronze badges

5 Comments

JavaScript_is_4_Real_men Over a year ago

@misaq Nice catch on that typo but mine won't work. Which browser?

JavaScript_is_4_Real_men Over a year ago

@misaq Don't know?? Wasn't me.

Mehdi Haghgoo Over a year ago

Firefox. Just check the fiddle link I put there.

JanR Over a year ago

I downvoted as it still returns null and not the "myCustomValue"

JanR Over a year ago

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 { }"

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related