使用Javascript访问CSS自定义变量

Accessing CSS custom variable with Javascript

本文关键字：自定义 变量 CSS 访问 Javascript 使用      更新时间：2023-09-26

我有如下样式的css文件

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

当我试图通过Javascript访问它时，它返回未定义

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

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

它给出一个警告:

External: Undefined
Internal: Undefined

是否有一种方法可以通过javascript访问自定义CSS变量?

提前感谢

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

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

。在HTML 

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

在这个例子中，你可以使用JavaScript获取元素的类名，如果它有"moveable"类，你就知道它可以移动。

编辑:

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

相关文章：