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

Question

在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以防止在非常短暂的时间内将其显示给用户,因为它是文档的一部分.