Question

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

外部CSS：

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

标记：

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

CSS规范中没有任何内容表明自定义属性无效。但是，浏览器会将它们渲染为无效，但理论上它们应该仍然可以通过window.getComputedStyle或类似方法获得。 Firebug在样式窗格中显示自定义属性及其值，但标记为覆盖。

以下摘录自：http://www.quirksmode.org/dom/getstyles.html

JavaScript的：

＆＃13;

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);

＆＃13;

输出应该是字符串＆＃34; myCustomValue＆＃34;

Answer 1

这应该可行（在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/ 但是，这在Chrome和IE 11中不起作用。link上对CSS自定义属性API进行了很好的讨论。

Answer 2

如上所述，也许这会对您有所帮助：

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

结构可能是这样的：

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

        ]

    }

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

搜索json对象的示例可以在这里找到： Searching JSON objects with JQuery

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

它可能仍然不是一个理想的解决方案，但它适用于各种浏览器。

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

2 个答案: