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



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

the goal define custom css property value in external style sheet.

fiddle it

external css:

#mydiv { --mycustomproperty: 'mycustomvalue'; }

markup:

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

there nil in css spec says custom properties invalid. however, browser render them invalid, should, in theory, still available window.getcomputedstyle or similar. firebug shows custom property , value in styles pane marked overwritten.

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

javascript:

class="snippet-code-js lang-js prettyprint-override">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); homecoming y; } var value = getstyle('mydiv', '--mycustomproperty'); alert(value);

output should string "mycustomvalue"

as discussed, maybe help you:

you store custom properties elements in .json file allow people edit.

the construction like:

{ "element": 'mydiv', "properties": [ { "propertyname": 'somename', "propertyvalue" : 'somevalue' }, { "propertyname" : 'someothername', "propertyvalue" : 'someothervalue' }, ] }

you need write javascript function find right value property given element. @ to the lowest degree work in browsers.

examples of searching json object can found here: searching json objects jquery

and can load json file variable using these methods: loading local json file

it's still not ideal solution, work across browsers.

javascript css properties getproperty getcomputedstyle

Comments

Popular posts from this blog

formatting - SAS SQL Datepart function returning odd values -

c++ - Apple Mach-O Linker Error(Duplicate Symbols For Architecture armv7) -

php - Yii 2: Unable to find a class into the extension 'yii2-admin' -