如何创建一个独立的 DOM 元素?一个不从父母那里继承 css 等

How to create an isolated DOM Element? One that doesn't inherit css from parents etc

本文关键字：一个父母那里 css 继承何创建创建独立 DOM 元素更新时间：2023-09-26

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

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

总而言之，我能够在空白页上完成这项工作。但是，如果我将我的小部件集成到填充的页面上，例如StackOverflow的主页，事情就会变得丑陋。它仍然有效，但看起来很丑。主要是因为我的输入文本继承了页面的 CSS 属性，例如填充、边距、悬停等。

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

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

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

欢迎任何关于如何将我的输入文本与父 CSS 隔离的建议:)

获取所有使一切变得丑陋的样式，并将它们插入元素style属性中，其优先级最高，然后是id和类样式。

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

更新 2下面是样式覆盖 http://jsfiddle.net/zhhxC/的示例