css - 影响嵌入页面样式的 Javascript 小部件

Question

我目前正在开发一个可以嵌入页面的小部件。但是，在嵌入时，它会影响嵌入页面的样式（字体、文本、布局等）。

我想知道 Clearspring 和其他小部件框架如何封装它们的小部件，以免影响嵌入页面。

谢谢。

Answer 1

制作您的小部件，例如在一个具有唯一 Id（或类，如果有多个）的 div 下，它最不可能与主机页面上的其他部件发生冲突。一个很好的例子可能是#company-widjet-name. 看看 jQuery UI 是如何做到的（.ui-widget input）。

然后您可能需要执行某种本地化重置，以避免父页面的 CSS 填满您的设计。修改诸如Eric Meyer 的重置之类的东西以适应。请避免，#uniqueId * { padding: 0, margin: 0 }因为它会导致头痛。

只要你做

#uniqueId a {
    property: value;
}

特异性应该足够强以正确设置元素的样式，而不会让主机页面的 CSS 无意中更改它。