javascript - 获取没有 DOM 元素的 css 值

Question

我想知道当 DOM 中没有使用它的元素时，是否有办法从样式表文件中获取 css 值？我正在使用 jQuery 并使用选择器 $(".classname").css() 来获取值。但是对于“classname”不在任何元素中的情况，如何获取值“谢谢

Answer 1

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

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

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

---

编辑:如评论中所述，此方法并不总是按预期工作(例如 inherited css values 未在 .classname 上明确定义，selector specificity 在 .classname 之上，等等)。

例如，由于 #foo 将选择器特异性增加到独立 .bar 之外，以下失败:

CSS:

#foo .bar { color: red; }

js:

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