Question

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

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

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

Answer 1

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

<强> CSS

p { color: red; }

<强> JS

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

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

警告

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

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

Answer 2

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

执行此操作

然后可能有类似的东西：

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

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

2 个答案: