Javascript：CSSStyleSheetオブジェクトを動的に作成して挿入できますか？

Question

document.styleSheetsは、ページ内のすべての有効なスタイルシートで構成されています。私は新しいものを作成し、それをjavascriptを使って現在のリストに追加できるかどうかを知りたい。

私は私がChromeから得るものすべてがTypeError: Illegal constructorで、document.styleSheets[0].constructor、document.styleSheets[0].__proto__.constructor、new CSSStyleSheet、CSSStyleSheet()を試してみました。 CSSStyleSheet.constructor()は純粋なオブジェクトを返しましたが、CSSStyleSheetオブジェクトが必要です。

リンク/スタイル要素を作成して追加してから変更することができます。私が知りたいことは、そういうオブジェクトをjavascriptで直接作ることができるのですか？あなたはjavascriptの内部のCSSを記述しようとしている場合

Answer 1

あなたが求めているものに近づく唯一のアプローチは、IE専用document.createStyleSheet([url] [,index])メソッドです。これは、最大31個まで作成することができます。^*styleSheetオブジェクト（その後、手動でstyle要素を手動で作成し、documentに追加する必要があります）。

This answerあなたはIE以外のブラウザ用createStyleSheet()方法を定義する方法を示していますが、それは（何らかの理由であなたが避けるためにしようとしている）link/style要素を追加することによって、そう期待通り。 *

---

^{IE 6 9から31のインポートスタイルシートdue to 5-bit field used for storing sheet IDsに制限されます。 IE10ではこの制限は、4095}

Answer 2

、次の操作を行います。

var s = document.createElement('style'); 
s.type = 'text/css'; 
s.innterText = 'body { background: #222; } /*... more css ..*/'; 
document.head.appendChild(s); 

サーバーからスタイルシートをロードしようとしている場合一方：限り

var s = document.createElement('link'); 
s.type = 'text/css'; 
s.rel = 'stylesheet'; 
s.href = '/url/to/css/file.css'; 
document.head.appendChild(s); 

Answer 3

に上げてきたあなたはこれを試してみました：

var myCSSStyleSheetIbj = Object.create(document.styleSheets[0]) 

[0]あなたがdocument.styleSheetsを交換する場合document.styleSheets [0]は実際にCSSStyleSheetオブジェクト、 であると仮定すると、どんなCSSStyleSheetでも動作します。

Answer 4

はい、できます。 document.styleSheetsを直接変更することはできませんが、ドキュメントに新しいスタイルのタグを追加することにより、エントリを追加することができます。

// Create the style element 
var elem = $('<style id="lwuiStyle"></style>'); 
$('head').append(elem); 

// Find its CSSStyleSheet entry in document.styleSheets 
var sheet, 
    yourSheet = null; 
for (var sid in document.styleSheets) { 
    if (document.styleSheets.hasOwnProperty(sid)) { 
     sheet = document.styleSheets[sid]; 
     if (sheet.ownerNode == elem[0]) { 
      yourSheet = sheet; 
      break; 
     } 
    } 
} 

// Test it by changing the background colour 
yourSheet.insertRule('body {background-color: #fa0}', yourSheet.cssRules.length); 

Firefoxを実行する場合は、あなたが直接スクラッチパッドでこれをテストすることができます。コードをコピーして、プレスShift+F4、貼り付けて、Ctrl+Lでコードを実行します。楽しむ！

Answer 5

Object.create(CSSStyleSheet.prototype)

あなたにCSSStyleSheetの空のインスタンスをバック与えます。言い換えれば、それはまさにあなたが期待している通りですnew CSSStyleSheet。

Object.createは、ECMAScript 5をサポートしているどのブラウザでも利用できます。互換性テーブルhereを検索してください。

Answer 6

あなたは要素を作成したくないと言ったことは知っていますが、それは真に唯一の方法です。少数の人々は、上記のこのアプローチを詳しく説明しているが、私は誰もがHTMLStyleElementとHTMLLinkElementの両方が彼らのCSSStyleSheetへの直接アクセスを取得するためにきちんとsheet propertyを持っていることをオフにカバーされていない注意してください：

var style = document.createElement("style"); 
document.head.appendChild(style); // must append before you can access sheet property 
var sheet = style.sheet; 

console.log(sheet instanceof CSSStyleSheet); 

document.styleSheets