将 HTML 元素的样式属性重置为样式表定义的默认值？答案

【问题标题】：Reset style properties of an HTML element to stylesheet-defined defaults?将 HTML 元素的样式属性重置为样式表定义的默认值？
【发布时间】：2010-08-08 12:04:46
【问题描述】：

CSS 代码：

p.myparagraph {
  color: yellow;
}

假设我已将使用myparagraph 类的<p> 元素的颜色变为红色。有没有办法将使用此类（不限于颜色）的段落的所有样式属性重置为其 CSS 定义的默认值？

【问题讨论】：

标签： javascript html css dom

【解决方案1】：

假设您一直在使用elem.style（其中elem 是您元素的DOM 对象），请尝试elem.style.cssText=""。

【讨论】：

【解决方案2】：

如果您使用的是 jQuery，您可以使用 toggleClass 切换要删除的类。

 $("p").click(function () {
      $(this).toggleClass("highlight");
    });

在此处查看更多内容：http://docs.jquery.com/Attributes/toggleClass#class

【讨论】：

即使 jquery 仍然需要知道你想要重置的类/样式。

【解决方案3】：

下面的代码将修改并命名为borderParra

<script type="text/javascript">
            $(document).ready(function() {
                $(".borderParra").focus(function() {
                    $(this).addClass("blueBorder");
                    $(this).select();
                });
                $(".borderParra").blur(function() {
                    $(this).removeClass("blueBorder");
                });
            });
        </script>

样式在哪里

.yellowBorder{ border:1px solid #FC3;}
.blueBorder{ border:1px solid #014165;}

【讨论】：

【解决方案4】：

不，您必须单独定义所有属性。 CSS 知道应用规则（以及以什么顺序），但规则是要更改的属性的白名单，而不是要撤消的事物的黑名单。

请问为什么你想要这个？

【讨论】：

【解决方案5】：

如果您枚举 HEAD 中的对象并尝试查找所有规则，则可能有一种方法可以检查 css 声明。但我会考虑两种不同方法中的一种：

在更改之前跟踪原始颜色
不要更改元素的颜色，而是在这些对象上切换 css 类。添加和删除类并具有影响新类的 CSS 规则。这使您可以轻松覆盖“默认”样式，然后随意取消覆盖。使用 JQuery，这可以使用 toggleClass() 来完成。

【讨论】：