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

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”，css() 中的“marginTop”)。

如果您希望根据内联样式和在网页内部以及通过外部样式表定义的 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]));
  }
}