获取尚未应用的类的CSS属性值

在jQuery中，我可以使用css方法获取选择器的CSS属性值并传递属性名称，例如：

$('#myElement').css('backgroundImage');

我的问题是，如何从尚未应用于任何元素的类中获取css属性值？ 类似于$('.myClass').css('backgroundImage'); 其中选择器返回零元素，但该类有一个CSS声明。

Answer 1

您可以创建临时元素而不将其添加到DOM，并检查相关属性。 即使元素未添加到DOM，CSS也会适用。 例如

CSS

 p { color: red; } 

JS

 var p = document.createElement('p'); alert(window.getComputedStyle(p, null).getPropertyValue('color')); 

将为您提供颜色值，但不会向DOM添加任何内容。

警告

经过一番研究后，我确定这种方法仅适用于基于Gecko的浏览器，因此不适合通用。 这种情况将来可能会发生变化 ，但如果您今天想要一个跨浏览器解决方案，我不会依赖于此。

鉴于此，我建议您只创建一个临时元素，添加所需的类，将其添加到文档中，检查它以获取样式值，然后将其删除。 您还可以应用诸如display: none样式，以防止它在文档的一部分非常短暂的时间内向用户显示。

Answer 2

简短回答：您无法从未应用于任何元素的类中获取css属性。 但是，您可以直接从CSS样式表中读取它，您可以使用DOM CSS来完成此操作

然后可能有类似的东西：

 var bgimage = myStyleSheet.cssRules[0].style.background-image;