如何创建一个孤立的DOM元素？一个不从父母那里继承css的人

Question

我正在为我的用户提供一个小部件。它们在脚本标记中包含我的JS api。一旦他们的身体标签中有<div class="PutWidgetHere" />，我的目标就是在div中渲染图像和文本框。

我的JS api找到div class=PutWidgetHere。它附加一个图像元素，然后是input type=text元素。输入必须放在图像的中心，所以我使用相对于div，z-index和其他几个css属性的绝对定位。

总而言之，我能够在空白页面上完成这个任务。但是，如果我将我的小部件集成在一个填充的页面上，比如说StackOverflow的主页，事情变得很难看。它仍然有效，但看起来很难看。主要是因为我的输入文本从页面继承了CSS属性，如填充，边距，悬停等。

如何防止页面弄乱我的小部件？

经过研究，我发现你不能禁用继承元素的CSS属性。对于填充和边距，我可以使用！important覆盖它们但是我不能对我的输入可以继承的所有可能的CSS属性执行此操作吗？

我想在if中放置一个iframe。但是这使得我的图像和输入元素无法与主页进行通信。另外，托管图像和按钮的iframe（无边界）可能会弄乱父页面？

欢迎任何有关如何将输入文本与父CSS隔离的建议：）

Answer 1

获取使所有内容变得丑陋的所有样式并将它们插入到element的style属性中，其优先级高于id和类样式。

<强>更新 您还可以为元素添加一些唯一ID，并创建自定义样式表。您可以使用html添加<style>，也可以使用javascript加载<style>，或者在页面加载后添加到代码。

更新2 以下是样式覆盖http://jsfiddle.net/zhhxC/

的示例