使用 Javascript 访问 CSS 自定义变量答案

【问题标题】：Accessing CSS custom variable with Javascript使用 Javascript 访问 CSS 自定义变量
【发布时间】：2011-04-04 05:33:50
【问题描述】：

我在 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 变量？

提前谢谢你

【问题讨论】：

据我所知，非标准的 CSS 定义被浏览器完全忽略，因此它不会出现在任何引用它的尝试中。我可能是错的，但我很确定我不是。
您使用自定义 css 变量有什么原因吗？如果您的网站是 HTML5，那么我会使用数据属性，旨在解决这种情况。 html5doctor.com/html5-custom-data-attributes，即使不是 html5，我仍然认为数据属性是更好的解决方案。
看到这个question和这个mozilla bug。
moving CSS 属性有什么作用？

【解决方案1】：

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

我能想到的唯一方法是实现你自己的 CSS 解析 JavaScript，但在大多数情况下，这对于你想做的事情来说可能是多余的，纯 JavaScript 解决方案或类值会更好。

例如在 HTML 中

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

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

编辑： 在@Anurag 发布的 Mozilla 错误链接中，提到了未知的 CSS 属性作为 CSS 2.1 规范的一部分将被忽略。

【讨论】：