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
Post a Comment