使用Javascript访问CSS自定义变量

Question

我在css文件中有以下样式

#galleryImages{
    position:absolute;
    top:24px;
    left:41px;
    width:900px;
    moving:false;
}

当我尝试通过Javascript访问它时，它返回undefined

外部css是正确的，它会正确返回其他样式变量以及getElementById

alert("External: " + document.styleSheets[0].cssRules[2].style.moving + 
    "\nInternal: " + document.getElementById("galleryImages").style.moving);

它发出警告：

External: Undefined
Internal: Undefined

有没有办法通过javascript访问自定义CSS变量？

提前谢谢

Answer 1

大多数（全部？）浏览器不会将未知的CSS加载到DOM中，并且JavaScript无法直接访问CSS样式，只能加载到DOM中。

我能想到的唯一方法是实现自己的CSS解析JavaScript，但对于大多数人来说，这可能对你想做的事情来说太过分了，纯粹的JavaScript解决方案或类值会更好。< / p>

e.g。在HTML中

<div class="moveable"></div>

使用该示例，您可以使用JavaScript获取元素的类名，如果它具有“可移动”类，则您知道它可以移动。

修改 在@Anurag发布的Mozilla bug链接中，提到了作为CSS 2.1规范的一部分，将忽略未知的CSS属性。