Question

我想使用jquery了解页面中的所有css设置。我知道要获得一些css的设置，我们确实喜欢这个，

$('#container').css("width")

因此，我尝试使用$('*')来获取所有css设置，但无法成功。请给我一些建议。

Answer 1

如果您想要使用内联CSS的元素，请尝试：

$("[style]").each(function() {
  for (var i=0; i<this.style.length; i++) {
    console.log(this.style[i] + " = " + this.style.getPropertyValue(this.style[i]));
  }
});

注意：这使用了根据CSS规范的Javascript样式名称，而不是jQuery的css()中使用的名称（例如CSS中的“margin-top”，“marginTop”中的css()）。

如果你想要根据网页内部和外部样式表定义的内联样式和CSS规则应用于元素的所有样式，那将会更加困难。

您至少可以找到类似以下内容的全局样式表：

for (var i=0; i<document.styleSheets.length; i++) {
  var css = document.styleSheets[i];
  for (var j=0; j<css.length; j++) {
    console.log(css[j] + " = " + css.getPropertyValue(css[j]));
  }
}

Answer 2

对我来说，你的问题不够明确，无法回答。你想要实现的是什么？

第
页中的所有css设置

可能意味着很多不同的事情。

您想要计算浏览器的CSS属性吗
您是否需要应用的原始CSS类（不是计算值，而是来自.css文件的声明值）+所有这些类或仅最具体的匹配
您想要原始的内联CSS样式吗
您是否需要所有包含样式表的列表
您真的想要所有房产还是仅选择
您是希望页面上的每个元素还是仅针对特定元素
....

如何使用jquery获取所有css的设置？

2 个答案: