获取没有DOM元素的css值

Question

我想知道当DOM中没有元素使用时，是否有办法从样式表文件中获取css值？我正在使用jQuery，我使用selector $（“。classname”）。css（）来获取值。但是对于“classname”的情况不在任何元素中，如何获取值“Thanks

Answer 1

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

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

即使DOM中实际不存在$el，您仍然可以访问其所有样式属性。

---

编辑：如评论中所述，此方法并不总是按预期工作（例如，{。3}}未明确定义.classname，inherited css values以上.classname等）。

例如，由于#foo将选择器特异性提高到超出独立.bar的范围，因此以下操作失败：

的CSS：

#foo .bar { color: red; }

JS：

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

Answer 2

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

适用于document.styleSheets和IE .rules以及其他所有人.cssRules

它还具有抽象的优点，因此您无需担心细节。

---

以上链接不再有效。以下是博客文章的截图，该文章由2008年的互联网档案备忘录捕获。

该函数基本上遍历所有样式表的所有样式，并提供修改/删除它们的能力 请注意这是不可推荐的，因为大多数现代样式表太大而无法使其成为高效的操作。

Answer 3

您必须解析document.styleSheets中的样式。

Answer 4

您可以去（这也适用于Chrome）：

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

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

Answer 5

要解决Chromium问题，您需要将其添加到正文：

示例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。