Question

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

如果页面作者将宽度CSS属性设置为内联function isPropertySet(elem, "width")，或者通过样式表，

(style="width: 100px;")应返回 true 。

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

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

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

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

谢谢！

Answer 1

如果要为未自定义的元素提供默认样式集，则最简单的方法是创建自己的样式表并将其置于顶部，然后再添加任何其他CSS文件。这样，在其他地方定制的每个元素都将覆盖您的默认样式。小心cascading order：不仅你的风格应该先于其他风格，而且选择者也应该足够通用。

另一方面，如果由于某种原因你想通过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%;，但在一个特定页面上有一个特定的标题，我希望它是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％。

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

Determine whether element has fixed or percentage width using JavaScript

然而，这些方法是必要的，这是非常荒谬的：/

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

3 个答案: