更改<style>的innerHTML用於添加新樣式線？

我有我的問題的解決方案，但即時通訊尋找一種更有效的方式來解決它。更改<style>的innerHTML用於添加新樣式線？

我基本上想要編寫一個函數，在CSS中添加新的樣式行與JavaScript。

我的解決方案是這樣的。

function addStyle(newStyleLine){ 
var mainStyle = document.getElementsByTagName("style")[0]; 
mainStyle.innerHTML = mainStyle.innerHTML + "body {"+newStyleLine+"}"; 
}

而我在我的html中有一個<style>標記。它工作正常，但我認爲當我將在<style>有更大的CSS時，它不會那麼高效。

有沒有人想過解決這個問題的更好方法。

謝謝。

來源

2014-12-27 Burak Tokak

確定'getElementByTagName'正常工作？可能你的意思是'document.getElementsByTagName（「style」）[0]'。 – Oriol 2014-12-27 14:26:23

「更大的CSS」是什麼意思？ – 2014-12-27 14:26:39

@Oriol即時通訊實際上使用getElementById，併爲我的風格有一個ID，但我讓它更簡單的問題，我的錯誤。我編輯它。 – 2014-12-27 14:28:00

使用內置的方法可以將新規則添加到樣式表中。

語法

stylesheet.insertRule(rule, index)

參數

規則是包含要被插入的規則（選擇器和聲明）一個DOMString。
索引是表示要插入的位置的無符號整數。

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet.insertRule

來源

2014-12-27 14:33:18 epascarello

正是我在找的。你有什麼想法這是如何工作的？我的意思是他背後的算法是什麼，我們確定它比我的解決方案更有效嗎？ – 2014-12-27 14:36:00

測試一下並找出答案。 – epascarello 2014-12-27 14:36:49

經過測試，我的功能爲1行添加，工作在0.19 ms，對於1k行添加，工作在501.75 ms。這種方法在0.06毫秒內工作1次。並在6.30毫秒工作1k添加。這是一個很大的效率。我仍然懷疑這種方法背後的算法。 – 2014-12-27 14:59:43

更改<style>的innerHTML用於添加新樣式線？

回答

相關問題