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。