Javascript 如何创建一个独立的DOM元素？没有'；不要从父母那里继承css等

我正在为我的用户提供一个小部件。它们将我的JSAPI包含在脚本标记中。一旦他们的body标签中有了

，我的目标就是在div中呈现一个图像和一个文本框

我的JSAPI使用

class=PutWidgetHere

查找

div

。它追加一个图像元素，然后追加一个

input type=text

元素。输入必须放在图像的正中央，所以我使用相对于div、z-index和其他css属性的绝对定位

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

如何防止页面与我的小部件发生冲突

经过研究，我发现不能为元素禁用CSS属性的继承。对于填充和边距，我可以使用！重要信息，但我无法为输入可以继承的所有可能的CSS属性执行此操作

我曾想过在div中放置一个iframe，但这样一来，我的图像和输入元素就不可能与宿主页面对话了。另外，承载图像和按钮的iframe（无边框）可能会弄乱父页面

---

欢迎就如何将我的输入文本从父CSS中分离出来提出任何建议：）

获取所有使一切变得丑陋的样式，并将它们插入元素的

样式

属性，其优先级高于id和类样式

更新： 您还可以向元素添加一些唯一的ID，并创建自定义样式表。您可以使用html添加

，或者使用javascript加载

，或者在页面加载之后添加到标记

更新2

---

下面是样式覆盖的示例

，但它可以包含在任何页面上？然后，我必须插入所有可能的样式属性？不是全部，只是那些可以影响元素的属性。它可以是显示、背景、填充、边距、z索引、字体、位置、边框、轮廓……记住这是一个小部件。它可以包含在任何页面上，因此可能会受到各种样式的影响。我的元素已经有一个唯一的id，但我不确定我是否理解您对更新的意思？如果元素的

id

确实是唯一的，那么您添加到文档中的样式不应该影响任何其他页面元素。因此，您只需要创建样式表，其中的样式具有可能影响您的元素的最大css样式。因此，如果我理解正确，您建议枚举并覆盖

输入
可以在
#uniqueInputId{…}
中包含的所有可能的样式属性。这里没有解决方案吗？我的问题值得更多关注！：）正在寻求帮助。。。