如何創建一個獨立的DOM元素？一個不會從父母那裏繼承css等

Question

我正在爲我的用戶提供一個小部件。它們包含我的JS API在腳本標籤中。一旦他們的身體標記中有<div class="PutWidgetHere" />，我的目標是在div內呈現圖像和文本框。

我的JS api發現div與class=PutWidgetHere。它追加一個圖像元素，然後是一個input type=text元素。輸入必須放置在圖像的中心，所以我使用相對於div，z-index和一些其他css屬性的絕對定位。

總而言之，我能夠在空白頁面上完成這項工作。但是，如果我將我的小部件集成到填充頁面上，請說StackOverflow的主頁，事情變得很難看。它仍然有效，但看起來很醜。主要是因爲我的輸入文本從頁面繼承CSS屬性，如填充，邊距，懸停等。

如何防止頁面與我的小部件混淆？

經研究，我發現你不能禁止繼承一個元素的CSS屬性。對於填充和邊距，我可以使用！覆蓋它們，重要的但我不能這樣做所有可能的CSS屬性，我的輸入可以繼承？

我想在div中放置一個iframe。但是，這使得我的圖像和輸入元素無法與主頁進行對話。另外，託管圖像和按鈕的iframe（無邊框）可能會混淆父頁面？

如何從父CSS我輸入文本隔離任何建議都是歡迎的。

Answer 1

獲取所有的風格，讓一切醜惡和它們插入元素的style財產，與具有最高優先級，然後ID和類樣式。

更新： 您還可以爲您的元素添加一些唯一的ID並創建自定義樣式表。您可以使用html添加<style>，也可以使用javascript加載<style>，或者在頁面加載後稍後添加標記。

更新2 這裏的例子樣式覆蓋http://jsfiddle.net/zhhxC/