Question

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

确保我插入的元素完全是最不详细和/或资源密集的，因为我希望它们是什么？是否有一种简单的方法可以清除给定HTML元素和子元素的所有样式？例如，在firebug中，您可以删除所有样式。我觉得必须，至少应该，是一种从样式表规则中豁免某些HTML元素的本地方法吗？

示例：

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

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

PS：我在JS和CSS方面有很多经验，所以你可以假设我会理解你要告诉我的任何事情。

Answer 1

我打算把它扔出去作为一种可能性。您的书签的自定义标签怎么样？由于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。

Answer 2

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

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

2 个答案: