css - Javascript Widget 影响它嵌入的页面的样式

Question

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

我想知道Clearspring和其他widget框架是如何封装他们的widget才不影响嵌入页面的。

谢谢。

Answer 1

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

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

只要你愿意

#uniqueId a {
    property: value;
}

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