如何为给定的 HTML 元素“重置”样式？答案

【问题标题】：How can I "reset" styles for a given HTML element?如何为给定的 HTML 元素“重置”样式？
【发布时间】：2011-03-02 10:45:21
【问题描述】：

我正在开发一种可嵌入的 javascript，它将 HTML 元素插入到未知页面中。我无法控制要插入 HTML 的页面的样式表。问题是我插入的 HTML 会被页面错误地风格化，我想防止这种情况发生。

要确保我插入的元素完全如我所愿，最不冗长和/或资源密集的方法是什么？有没有一种简单的方法来清除给定 HTML 元素和子元素的所有样式？例如，在 firebug 中，您可以删除所有样式。我觉得必须，最起码应该，是一种将某些 HTML 元素从样式表规则中豁免的原生方式？

例子：

var myHTML = $("<div>my html in here</div>");
myHTML.resetAllStyles();   //<--- what would this function do?
myHTML.appendTo("body");

我真的很想避免为我插入的每个元素明确说明我想要的属性...

PS：我在 JS 和 CSS 方面有很多经验，所以你可以假设我几乎能理解你要告诉我的任何内容。

【问题讨论】：

+1 表示您开始的精彩讨论 :)

标签： jquery css stylesheet

【解决方案1】：

您不能阻止元素从父节点继承 CSS 样式。您所能做的就是覆盖所有已继承的样式。

【讨论】：

太糟糕了。谁是提出这个规范的短视白痴？
@Sambo - 有一些机制可以做到这一点，如果你想要一个框架，请使用一个框架，<iframe>。
他们非常聪明地创建了 CSS。但是有些程序员必须明白，他们不能根据自己的需要重新发明一种编程语言:)
@Sambo - 为什么不呢？ <iframe> 不必是另一个文档或 URL。 CSS 完全正如它的名字所说的那样，它是级联的:)
@Sambo - 同时停下来想想如果你应该这样做，哪些属性会干扰？您不应该只设置这些，然后让用户/页面定义其余部分，以使其适合整体主题吗？

【解决方案2】：

我将把它作为一种可能性扔出去。您的书签的自定义标签怎么样？由于 IE，需要对自定义 xml 命名空间进行更多修改，但可能对您有用。

jQuery 似乎也不介意。

http://jsfiddle.net/uvfAf/1/

jQuery:

$('#tester').animate({opacity: .3},1000);

HTML：

   // Not the main HTML tags. These are embedded in the body as the root
   //   of the bookmarklet. Scary? Perhaps.
<html xmlns:customtag>
    <style> 
        @media all {  
          customtag\:someElement { 
            width:100px; 
            height: 100px; 
            background: blue; 
            display: block; 
          } 
          customtag\:someOtherElement { 
            width: 50px; 
            height: 50px; 
            background: red; 
            display: block; 
          }
        }
    </style>
    <customtag:someElement id='tester'>test</customtag:someElement>
    <customtag:someOtherElement>test</customtag:someOtherElement>
</html>

我用这个页面来弄清楚如何在 IE 中做自定义标签：

http://happyworm.com/blog/tag/custom-tags/

编辑：

看起来 IE 希望在 HTML 标记中定义 xmlns，所以我将容器更改为 <html>。不确定总体影响，但似乎有效。

我更新了示例和 jsFiddle。

【讨论】：

这是一个很棒的方法！我会试一试，尽管我怀疑在跨浏览器兼容性方面我会受到伤害。
在 Chrome/Safari/Firefox 中，您不必为所有时髦的 XML 命名空间标签而烦恼。您可以分配您想要的任何标签<mycustomtag></mycustomtag>，它会起作用。 IE 是问题所在，因此是 xml 命名空间。似乎可以跨浏览器正常工作。
@Sambo - 请务必告诉我结果如何。
你会如何处理这样的输入标签？例如如何命名输入标签以表现得像密码？