使用JavaScript检索自定义CSS属性值-不能_Javascript_Css_Properties_Getproperty_Getcomputedstyle

使用JavaScript检索自定义CSS属性值-不能

javascript css properties

使用JavaScript检索自定义CSS属性值-不能,javascript,css,properties,getproperty,getcomputedstyle,Javascript,Css,Properties,Getproperty,Getcomputedstyle,目标是在外部样式表中定义自定义CSS属性值。外部CSS: #myDiv { --myCustomProperty: 'myCustomValue'; } <html> <div id='myDiv'></div> </html> 标记： #myDiv { --myCustomProperty: 'myCustomValue'; } <html> <div id='myDiv'></di

目标是在外部样式表中定义自定义CSS属性值。

外部CSS:

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

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

标记：

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

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

这应该是可行的（在Firefox32中测试）


#myDiv{
--myCustomProperty:'myCustomValue'；
}
函数getStyle（el、styleProp）{
var x=document.getElementById（el）；
if（x.currentStyle）
变量y=x.currentStyle[styleProp]；
else if（window.getComputedStyle）
var y=document.defaultView.getComputedStyle（x，null）.getPropertyValue（styleProp）；
返回y；
}
var value=getStyle（'myDiv'，'--myCustomProperty'）；
警报（值）；

然而，这在Chrome和IE 11中不起作用。上有一个关于CSS自定义属性API的很好的讨论。

如前所述，这可能会帮助您：

您可以将元素的自定义属性存储在.json文件中，供人们编辑

结构可能类似于：

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

        ]

    }

然后，您需要编写一个javascript函数来查找任何给定元素的属性的正确值。这至少可以在所有浏览器中使用

以下是搜索json对象的示例：

您可以使用以下方法将json文件加载到变量中：

这可能仍然不是一个理想的解决方案，但它可以跨浏览器工作。

您使用哪种浏览器？@misaq主浏览器是Ch38，但也在FF和IE的各种版本中进行了测试。Ch38是浏览器吗？我从来没听说过。@misaq抱歉，我是说Chrome。检查一下为什么这在Chrome和IE 11中不起作用，以及它是如何工作的。@misaq很好地理解了这个错误，但我的错了。哪个浏览器？@misaq不知道？？不是我。只要检查一下我放在那里的fiddle链接，我投了反对票，因为它仍然返回null，而且“myCustomValue”在chrome中不起作用，从我可以看出chrome实际上没有读取dom元素上的样式：它被列为：0:CSSStyleRulecssText:#myDiv{}听起来不错。虽然这并不是我所希望的，但它将作为一个可能的后备解决方案。如果不完全理解你想要实现的目标，这是很困难的。但在其他浏览器加入之前，css选项在现阶段肯定是不可行的