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

【问题标题】：How can I tell if a CSS property was manually set by page author?如何判断 CSS 属性是否由页面作者手动设置？
【发布时间】：2012-11-22 21:47:16
【问题描述】：

我想知道页面作者是否为 DOM 元素设置了特定的 CSS 属性 (width, height, margin, padding, font-size, …)。我的目标是不更改已明确设置尺寸的元素，而是更改未明确设置的元素。

如果页面作者将宽度 CSS 属性设置为内联 (style="width: 100px;") 或通过样式表，

function isPropertySet(elem, "width") 应该返回 true。

这并不简单，因为布局引擎会推断出这些值，但似乎我尝试访问它们时浏览器已经提供了值。

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

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

在我苦苦搜索样式表之前，有没有人有更好的方法？

谢谢！

【问题讨论】：

标签： javascript jquery css dom

【解决方案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 并以粗体显示。你会认为标题没有自定义，并覆盖了它的样式，而实际上它是自定义的，大小和重量是故意设置的。

【讨论】：

不是每一个..只有选择器更具体。第二个中的p 选择器，用户样式表不会覆盖第一个中的p.whateverclass。不过，我认为这是正确的做法。不要试图建立这样的“聪明”技巧，因为它只会对你不利。
@GolezTrol：当然。但是如果 OP 想要提供默认样式，选择器将是通用的（好吧，除了一些边缘情况，比如提交类型的输入等）
对于我的特定用例，我需要我的脚本能够以编程方式查询它以响应用户交互。如何将计算的样式与 Javascript 中的默认样式进行比较？

【解决方案2】：

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

【讨论】：

【解决方案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

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

【讨论】：