我目前正在开发一个可以嵌入到页面中的小部件。但是,当嵌入时,它会影响其嵌入页面的样式(字体、文本、布局等)。
我想知道Clearspring和其他widget框架是如何封装他们的widget才不影响嵌入页面的。
谢谢。
最佳答案
制作您的小部件,比如在一个具有唯一 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 无意中更改它。
关于css - Javascript Widget 影响它嵌入的页面的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/909025/