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

Question

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

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

谢谢.

Answer 1

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

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

只要你这样做

#uniqueId a {
    property: value;
}

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