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

Question

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

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

感谢。

Answer 1

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

然后，您可能需要执行一种本地化重置，以避免父页面的CSS填满您的设计。修改Eric Meyer's reset之类的内容以适应。请避免使用#uniqueId * { padding: 0, margin: 0 }因为它会引起麻烦。

只要你这样做

#uniqueId a {
    property: value;
}

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