Javascript 如何对网页上的特定元素进行沙箱处理？

我的网页上有这个东西。。。我想它可以被称为小部件

如何将它的CSS和JS与包含页面的CSS和JS分开？最好不使用iframe

---

在我的应用程序中，用户可以自定义内容的CSS，因此，我需要一个干净的列表。

在小部件的最外层元素上，设置一个相对唯一的类名。例如：

<div class="my_spiffy_widget">
  <!-- Insert spiffy widget here -->
</div>

这样可以确保您的规则不会意外地被其他CSS规则覆盖

与JavaScript类似，在函数前面加上一个通用的、独特的前缀：

function my_spiffy_widget_doSomething() {...}

如果可能，请避免使用全局变量，但如果不能，请同时为它们添加前缀：

var my_spiffy_widget_firstTime = true;

---

你可以加上！属性中的重要声明，使用户更难覆盖设置

例如：

---

和/或您可以获取一个CSS重置脚本（如Eric Meyer的），并在每个选择器前面加上您的容器DIV的名称。

您可以给非常复杂的CSS类名之外的所有元素命名，并确保它们不会与用户将选择的元素发生冲突（如“KAFHxyz…”）。这样，所有sane类名称和默认样式将只应用于“小部件”

这需要一些努力，因为您需要使用

设置所有标准CSS样式！重要信息

（因此用户可以说“body{font…}”，它只适用于他的区域

或者，您可以尝试编写一些javascript，获取所有元素的所有样式，然后添加“小部件”（它是JS/CSS），然后将所有样式重置为以前的样式。这应该是可能的，但性能可能会很差

---

[编辑]也就是说，你知道你可以用JavaScript创建一个

iframe

，并将内容（里面的DOM）操纵到你的核心内容，是吗？在这种情况下，iframe将只是一个类似Div的元素，为CSS和JS文件添加一个“名称空间”。

我认为没有办法，但我想知道一个：）你不能停止将常规CSS应用于该部分，但要停止将该部分的CSS应用于页面的其余部分，请参阅Devon_C_Miller的回答。虽然这对基本的沙盒小部件有效，但用户可以自定义内容的CSS，因此，我需要一个干净的列表。问题是，必须覆盖所有规则。如果您忘记了一个属性，那么它将被继承/级联/其他任何属性。是的，这是可行的，但我们必须非常小心。除了费利克斯·克林所说的：任何具有更高特异性的规则都将优先于其他规则。这就是CSS中级联的工作原理。我希望我和用户能够完全独立地控制CSS。我控制应用程序的CSS，用户控制他们的东西的CSS。很久以前与我共事的一位同事将此添加到基本样式表*{margin:0px；padding:0px；}中，这对我们的应用程序非常有用，但它会干扰小部件，如果用户想要更改表上的填充，他或她需要更改每个单元格的填充，而不仅仅是在表标记中声明填充

var my_spiffy_widget_firstTime = true;

div.widget #header {
    padding-left: 10px !important;
    padding-right: 5px !important;
}