Question

我想知道是否可以使用Javascript或其他方式将元素的样式恢复为“默认”状态。

我需要这样做，因为我将HTML插入第三方网页，无法控制它们归因于不同元素的样式。例如，他们可能有：

div {
  margin: 10px;
  padding: 5px;
  line-height: 10px;
  font-size: 150%;
  border: 10px solid yellow;
  foo: bar;
}

是否有一种简单的方法可以清除所有样式并将其设置回“默认”设置？是否有默认样式列表？

由于

Answer 1

似乎某人已经在SO上提出了这个问题。

CSS Reset, default styles for common elements

Answer 2

默认样式由每个浏览器定义，正如您所猜测的那样，所有浏览器的样式都有点不同。您可以定义每个样式属性并将其指定为inherit！important：

div {
  margin: inherit !important;
  padding: inherit !important;
  line-height: inherit !important;
  font-size: inherit !important;
  border: inherit !important;
  foo: inherit !important;
}

我并不完全肯定这会起作用，所以我会环顾四周试一试。

Answer 3

如果您可以上传自己的CSS（或内部样式表），则可以设置元素的ID，这些样式将优先于通用div {}样式。

Answer 4

您总是可以使用所有默认样式规则定义一个重置类或类似的类，然后使用JS将该样式应用于要重置的元素。例如

.reset {
  margin: 0 !important;
  color: #000 !important;
  ... etc ...
}

然后是一些jQuery：

$('div').addClass('reset');

可能有用......

是否可以从HTML元素中“删除”样式？

4 个答案: