如何判断页面作者是否手动设置了CSS属性？

Question

我希望能够判断页面作者是否为DOM元素设置了特定的CSS属性(width, height, margin, padding, font-size, …) 。 我的目标是不更改已明确设置其维度的元素，而是更改那些没有明确设置维度的元素。

如果页面作者将宽度CSS属性设置为内联(style="width: 100px;") ，或者通过样式表，则function isPropertySet(elem, "width")应返回true 。

这不是直截了当的，因为布局引擎推断出这些值，但似乎我尝试访问它们，浏览器提供了值。

例如，我尝试过getComputedStyle(elem).getPropertyValue("width") ，但这会返回计算出的宽度（给定名称并不奇怪）。

样式属性（例如elem.style.width ）是不够的，因为它不包括样式表中设置的属性。

在我去寻找样式表的巨大痛苦之前，有没有人有更好的方法？

谢谢！

Answer 1

如果要为未自定义的元素提供默认样式集，则最简单的方法是创建自己的样式表并将其放在顶部，而不是任何其他CSS文件 。 这样，在其他地方定制的每个元素都将覆盖您的默认样式。 注意级联顺序 ：不仅你的样式应该先于其他样式，而且选择器也应该足够通用。

另一方面，如果出于某种原因，你想通过JavaScript知道元素是否是自定义的，那么除非你想要将特定样式与默认样式进行比较，否则它是不可能的，因为默认样式可能因浏览器而异。 例如，在Firefox中， <h1/>的默认样式是：

h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin: .67em 0;
}

而Chrome的风格略有不同：

h1 {
  display: block;
  font-size: 2em;
  -webkit-margin-before: 0.67em;
  -webkit-margin-after: 0.67em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
}

这会产生一个有问题的边缘情况。 想象一下，我希望所有<h1/>都是font-weight:normal; font-size: 200%; font-weight:normal; font-size: 200%; ，但在一个特定的页面上有一个特定的标题，我希望它是2em并以粗体显示。 你会认为标题不是自定义的，并且覆盖它的风格，而事实上，它是自定义的，大小和重量是故意设置的。

Answer 2

如果您不担心继承的样式而只关注特定的DOM元素，那么您可以动态创建特定的元素和类名（因此它只有CSS样式），然后使用上述方法检查它的宽度并进行比较？

Answer 3

我发现从JavaScript回答这个问题的最好方法是创建一个临时元素，它不附加到dom，并从中读取我的默认值。 然后我根据从我正在测试的元素（使用jQuery或getComputedStyle）读取的值测试默认值 - 如果他们比较那么它是最好的猜测他们还没有设置。 显然，这有一个缺点，即如果元素的属性设置为与默认值完全相同的值，则无法区分。

像这样的东西

function hasDefaultStyle(elm, prop) {
  var def = $('<'+$(elm).attr('tagName')+' />').css(prop);
  return $(elm).css('prop') == def;
}

在处理不同的维度指标时，例如百分比，厘米，em等等 - 由于您提到的计算问题，这些必须以不同的方式处理 - 至少在FireFox之外的浏览器上。

FireFox在我看来是正确的，当你从一个没有放在dom中的元素请求样式时，它返回原始值，即50％。

有关如何解决至少百分比问题的更多信息，请在此处查看我的答案：

使用JavaScript确定元素是否具有固定宽度或百分比宽度

然而，这些方法是必要的，这是相当荒谬的：/