以編程方式從單個HTML元素中刪除CSS樣式規則

我想在文檔中添加一些根本沒有樣式的HTML元素。但我需要確保這些元素不會看起來不同，無論項目，網頁或其他任何事情。這些元素將通過Javascript插入到頁面中，並將成爲SPAN。以編程方式從單個HTML元素中刪除CSS樣式規則

我的想法是將SPAN添加到文檔的文本樣式片段中。但是一些樣式可能在之前被添加到SPAN元素中，並且會改變我期待的結果。

因此，讓我們假設我正在編寫一個Widget，任何人都可以在您自己的網頁中使用它。這就是爲什麼我不能直接更改元素的樣式，比如直接更改樣式表。解決方案必須通過Javascript實現。不需要JQuery。

<head> 
    <style> 
    span{ 
     font-weight: bold; 
     /*anything else goes below*/ 
    } 
    </style> 
</head> 

<body> 
    <span class='a_regular_span'>This text must be bold and anything else</span> 
    <span>This text must have only the CSS rules I applied by Javascript, and must not inherit the rules for all SPANs in the page</span> 
</body>

任何想法？

來源

2013-11-28 Victor Ferreira

可以試試嗎？

<style> 
     span{ 
     font-weight: bold; 
     /*anything else goes below*/ 
     } .a_regular_span span{ font-weight: normal; 
     /*anything else goes below*/ 
    } 

</style>

來源

2013-11-28 20:11:20 Xarxas

因此，讓我們假設我正在寫一個Widget和任何你可以在自己的網頁中使用它。這就是爲什麼我不能做太多改變元素的風格直接

你可以使用一個style元素與scoped屬性。這樣你就可以只設計你的元素，而不會影響頁面的其他部分。

但請注意，舊的瀏覽器不支持它。

如果你不希望頁面的樣式來影響你的元素，請參閱How can I prevent CSS from affecting certain element?

來源

2013-11-28 20:12:51 Oriol

雖然作用域方法可以忽略其他CSS樣式。將跨度插入錯誤的地方會弄亂其他跨度的風格。 –

是的我認爲我需要更通用的解決方案但是我通過閱讀'scoped'的描述瞭解到，其他元素不會繼承這些規則。我需要其他規則不被特定元素繼承。 –

@VictorFerreira然後，看看我做了一些thime前的問題：[我怎樣才能防止CSS影響某些元素？]（http://stackoverflow.com/questions/17407424/how-can-i-prevent-css-from -Iffecting-certain-elements） – Oriol

如果你真的希望你的元素的樣式從頁面上的其他元素分開，你可以使用自定義標籤來做到這一點。

例如，您可以不使用span來使用span，並以任何您喜歡的方式對這些元素進行樣式設置。

<head> 
    <style> 
    span{ 
     font-weight: bold; 
     /*anything else goes below*/ 
    } 
    </style> 
</head> 

<body> 
    <span class='a_regular_span'>This text must be bold and anything else</span> 
    <customspan>This text must have only the CSS rules I applied by Javascript, and must not inherit the rules for all SPANs in the page</customspan> 
</body>

來源

2013-11-28 20:26:38 tjscience

嗯，對我來說聽起來不錯。該代碼將無效，對吧？！但這是一個不錯的步驟 –

該標記無效，但仍由瀏覽器呈現。如果你堅持使用span標籤，那麼沒有完美的解決方案。在同一個網站/域名中，任何通用標籤仍然可以通過JavaScript進行修改，即使它位於iframe中 –

以編程方式從單個HTML元素中刪除CSS樣式規則

回答

相關問題