不使用DOM元素获取CSS值

Question

我想知道是否有一种方法可以在没有元素使用的情况下从样式表文件中获取CSS值？ 我正在使用jQuery，并使用选择器$（“.classname”）.css（）来获取值。 但是如果“classname”未包含在任何元素中，该怎么做才能获得值呢？谢谢

- HP.

Answer 1

只需创建一个具有该类名的元素并检查它。您甚至不需要将其附加到DOM：

var $el = $('<div class="classname"></div>');
var opacity = $el.css('opacity') // or whatever 

即使 $el 实际上并不存在于DOM中，你仍然可以访问到它的所有样式属性。

---

< p > < em >编辑：正如评论中提到的，该方法并不总是按预期工作（例如，继承的CSS值在.classname上未明确定义，选择器特异性高于.classname等）。

例如，以下示例由于#foo增加了选择器特异性，超过了独立的.bar而失败：

css：

#foo .bar { color: red; }

js：

var $el = $('<div class="bar"></div>');
$el.css('color'); // Expected: "red", Actual: ""

- Crescent Fresh

---

继承的样式怎么办？我猜你可以使用类似 $('<div id="foo"><div class="classname"></div></div>').find('.classname').css('opacity') 的方法，但是有很多情况下甚至这种方法也会失效（例如从 html 或 body 上特定选择器继承的样式）。 - eyelidlessness

该元素必须存在于DOM中才能获取样式。JQuery 可能已经自动处理了这个问题。但使用原生的JS则无法工作，你将无法获得样式。 - Nisim Joseph

Answer 2

请看http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript，它提供了一种跨浏览器的方法来动态获取和添加CSS。

它使用了document.styleSheets以及IE的.rules和其他浏览器的.cssRules。

此外，它的优点在于抽象化程度较高，您不需要担心细节问题。

---

上述链接已失效。以下是互联网档案馆在2008年捕获的博客文章截图。

该函数基本上会遍历所有样式表的所有样式，并提供修改/删除它们的能力。
请注意，这并不被推荐，因为大多数现代样式表都太大了，使得这个操作效率低下。

- Jonathan Fingland

---

于是，又有一个 Stack Overflow 的答案因链接失效而消失了 :( - Gusk

Answer 3

您可以这样做（在谷歌浏览器中同样适用）：

var $elem = $('<div id="foo"></div>').appendTo('body'),
    value = $elem.css('margin-top');

$('#foo').remove();

- mrbackman

Answer 4

为了解决Chromium的问题，您需要将其添加到body中：

示例CSS：

.dummy {
  min-width: 50px;
  max-width: 250px;
}

示例Javascript：

$(document).ready(function() {
  var dummy = $('<div class="dummy" style="display: none;"></div>').appendTo('body');
  console.log(dummy.css("min-width"));
  console.log(dummy.css("max-width"));
  dummy.remove();
});

这适用于所有现代浏览器，Chrome，FF，IE11。

- codenamezero

Answer 5

你需要从document.styleSheets中解析样式。

- Ionuț G. Stan