如何在IE中更改cssText？

Question

過去，我已經能夠通過內聯樣式標簽修改頁面上的CSS。 我知道這聽起來很可怕，但這是針對在自定義CSS編寫中使用某種WYSIWYG（雖然不是文本）的情況。

我曾經做過類似的事情： tag.styleSheet.cssText = myrules;

我不知道確切的時間，但是當我嘗試這樣做時，IE有時會開始說“ Invalid Argument”。 真正的症結在於，執行tag.innerHTML = 'body {}' Unable to set value of the property 'innerHTML': object is null or undefined ，這在任何其他瀏覽器中都不會發生。

編輯

為了清楚起見，我使用的是內聯樣式標簽。 我不嘗試使用內聯樣式屬性。

<style type="text/css" id="mytag"></style>

如何更改該標簽的內部？

編輯2請看這個小提琴：

http://jsfiddle.net/tTr5d/

看來我對tag.styleSheet.cssText的解決方案與使用styleSheets屬性完全相同。 您可以注釋掉cssText的最后一個定義，以使其按照@Teemu的建議運行。 所以現在我真的迷失了為什么它無法在我的應用程序中工作。 如果有人有什么想法可以破壞該功能，那就太好了。 同時，我將修補我的應用程序。

Answer 1

IE限於32個樣式表。 我很想忘記這個事實，它似乎在<link>之上包括內聯樣式標簽。

我更改了沙箱以啟用縮小功能，以便將文件放在一起。

然后我的代碼工作了。

這樣看來，當您超過限制並通過JS插入時，直到您嘗試執行我的操作后，您才會得到真正的錯誤。

Answer 2

您只能通過styleSheets集合（或imports集合）獲得對styleSheet對象的引用。 如果直接引用style元素，則只會得到一個HTML元素。 （在for..in loop中檢查兩個對象的屬性，並查看它們之間的區別）

這在所有IE中都有效，並且結果立即呈現：

document.styleSheets['mytag'].addRule('BODY', 'background-color:red');

MSDN中的更多信息：styleSheet對象

Answer 3

您可以使用jQuery。 如果是內聯樣式，則可以使用.attr()函數。

$("#myElement").attr('style')

否則，您可以看到.css()提供的內容。 您可以使用它來獲取和設置各種CSS樣式。

其他與CSS相關的jQuery方法

Answer 4

我從來沒有對樣式元素和IE的innerHTML感到好運。 即使您需要為IE分支，dom方法也更可靠。

沒有jQuery的

function addNewStyle(str, title){
    var el= document.createElement('style');
    if(title) el.title= title;
    if(el.styleSheet) el.styleSheet.cssText= str;
    else el.appendChild(document.createTextNode(str));
    document.getElementsByTagName('head')[0].appendChild(el);
    return el;
}