Javascript 如何在当前页面中CSS沙盒/重置整个DIV区域？

我们正在开发一个bookmarklet，当bookmarklet加载到不同的网站上时，例如：cnn.com、bbc.co.uk、yahoo.com，它会以各种样式显示，我们很难重置这些样式

bookmarklet内容在当前页面DOM中，而不是在iframe中（因为我们需要cookie和对DOM的访问）

我们尝试使用CSS重置，但这只重置了一些基本内容，比如边距。还有一些页面，例如有一个自定义表单，或者它继承的圆形表格矩形，但不应该继承

---

有没有一种方法可以完全隔离当前页面中的这个DIV区域，使其看起来像我们想要的那样？

好吧，您可以使用唯一id和添加！对于以后的每个属性都很重要-用于重置DOM中生成的元素-或者您可以在“HTML5”中使用新的作用域属性

但这可能会导致该元素或父元素上所有显式“继承”值样式出现问题。例如，相对字体大小也会导致问题

因此，这是style部分的实验范围属性，但上次我尝试它时，只有Chrome/Chrome支持它，Firefox可能最近也获得了对它的支持——因为邮件列表上有大量讨论

编辑：

另一种解决方案是使用默认情况下不在DOM中的自定义元素。 类似于document.createElement（“thisisfrommyapp”）； 您可以像其他元素一样设置它们的样式，但必须应用display:block或任何需要的行为

此外，IE允许使用它们，但实际上您需要先将它们插入Tridents的解析器。如果要在HTML中使用它们，必须在解析DOM之前执行createElement（）（因此它很可能位于文档的头部）

document.createElement（'customelement'）；
也可以在IE8中使用

您必须只为Trident执行createElement操作，否则您将由于其显示而导致奇怪的解析行为：inline block defaulted model:）

如果您在网站上使用XHTML是出于愚蠢的原因（由于解析器剥离了XML标记，因此没有有效的理由在HTML上使用XHTML），那么您应该为其使用自定义名称空间

---

~Cheers

试着用一些不太可能出现在他们页面上的模糊元素替换你的div怎么样

例如，

b

或

em

或

i

，如果你不担心浏览器支持的话，甚至可能是新的html5元素之一

并将它们设置为

display:block

，使其功能类似于块元素

div

你得到的HTML不是有效的或漂亮的，但它是一个书签，所以，嗯

除此之外，你需要一个真正好的重置

或者你只需要在你的风格上有细微的差异就可以了。

我们最终使用

---

CleanSlate是一个极端的CSS重置样式表。它用于将HTML元素及其所有子元素的样式重置为默认CSS值。它完全由以下内容组成！重要规则，它覆盖所有其他类型的规则。

按照以下两个步骤对容器进行沙箱处理

<div class="namespace-box">
    <h1 class="namespace-title">Title</h1>
    <p class="namespace-text">Text</p>
</div>

使用咕噜声或咕噜声任务将属性选择器添加到原始CSS中。这会增加级联并防止未设置黑客的覆盖：

[class*=“命名空间-”]。命名空间框， [class*=“名称空间-”]。名称空间标题， [class*=“命名空间-”]。命名空间文本{ //原始属性 } 您可以通过任务自动化规范

---

喜欢你的防弹容器。

为什么不给它一个唯一的id并根据你的喜好设计它呢？我们尝试过这样做，但问题是我们需要定义每个css属性的值。我认为这太过分了。你真的没有选择的余地，如果你将你的div嵌入到一个现有的页面中，并且有一个现有的样式表，那么除了编写你自己的样式之外，没有办法覆盖那些样式。实验范围属性确实可以工作，但这是一个遥远的未来的愿望。也许未来10年所有主流浏览器都将采用。我读了这篇链接文章，但最大的问题仍然是输入标签。您将如何替换它们？这很友好，但输入和其他东西是无法替换的。请参阅我的答案的更高级版本：此外，人们可能只使用

*{font-family:'Comic Sans MS'！important；}

，因此使用晦涩的元素在这里也不会有帮助……并让您使用！重要的是要覆盖这些，这听起来像。

<div class="namespace-box">
    <h1 class="namespace-title">Title</h1>
    <p class="namespace-text">Text</p>
</div>

[class*="namespace-"], [class*="namespace-"]:after, [class*="namespace-"]:before, [class*="namespace-"]:hover:after, [class*="namespace-"]:hover:before { all: unset; // properties to be unset } [class*="namespace-"].namespace-box, [class*="namespace-"].namespace-title, [class*="namespace-"].namespace-text { // original properties }