CSSOMのinsertRuleを使用した後、スタイルが見えなくなり、スタイルタグが再追加できない

insertRuleを使用してCSSOMでスタイルを追加した場合、2つのことに気付きました。CSSOMのinsertRuleを使用した後、スタイルが見えなくなり、スタイルタグが再追加できない

追加されたスタイルはFirebugで表示中にhtmlに表示されません。

スタイルタグが別の要素に追加（例：頭から体に移動）されていると、追加されたスタイルは機能しません（FirefoxではHappens、ChromeではHappens）。

タグが付加された後にスタイルが追加された場合、それらは機能します。彼らはまだFirebugには表示されません。シートを追加し直す必要があります。

Firebugには表示されないため、Firebugでは気まぐれかもしれませんが、動的に追加されない通常のスタイルが表示されます。

追加の後に動作しないスタイルについては、FirefoxとChromeでこれが発生するため、これが標準であるかどうか疑問に思っています。基準を見ると、私はこれについて何も見ませんでした。私がそれらを理解していない限り。明確にするため

var style = document.createElement('style'), 
    sheet = style.sheet; 
document.head.appendChild(style); 
//When line 6 is un-commented the styles work 
//if line 8 is also commented out. 
//document.querySelector('.container').appendChild(style); 
//Get the sheet when line 6 is un-commented 
sheet = style.sheet 
sheet.insertRule('.test{color: red}'); 
document.querySelector('.container').appendChild(style); 
//styles don't apply after the previous line

編集：あなたはstyle.sheet.insertRule(styleString)でのスタイルを適用することができ、HTMLの<head></head>から<style></style>タグを追加し、スタイルがドキュメントに適用される追加した場合は

。

すでに<head><style></style></head>よう<head></head>から<style></style>、とは<div><style></style></div>すべてのスタイルが失われているようにどこか<style></style>を追加しようとすると、再度適用されないことを追加した場合。

これは正常ですか？

コードフロー：

作品：

<style>

動作しませんstyle.sheet.insertRule(styleString)

でのスタイルを追加

追記：

AP
<style>
にstyle.sheet.insertRule(styleString)でのスタイルを追加した保留<style>は

私の他の問題は、スタイルはそれらが適用されている場合でもFirebugに表示されません<style></style>に追加点である同じ<style>どこか別の場所に追加します資料。

編集がより透明度：

私はスタイルシートを変更せずにstyle要素をreappend場合は、スタイルが残っている：

var style = document.querySelector('style'); 
 
document.head.appendChild(style);

* {color: red}

<p>Hello world</p>

しかし、私はスタイルシートを変更した場合JSでは、変更は取り消されます：

var style = document.querySelector('style'), 
 
    sheet = style.sheet; 
 
sheet.insertRule('* {color: red}', 0); 
 
document.head.appendChild(style); //Comment this line out, and this works.

/* CSS rules will be inserted with JS */

<p>Hello world</p>

出典

2016-04-15 Quentin Engles

されていない何の質問特定の？ – guest271314

主に、既にスタイルがinsertRule normalで追加されているスタイルタグを追加した後にスタイルが適用されないという事実はありますか？ –

Questionを正しく解釈すると、これは 'div {color：green}; div {color：blue}に似ています。' 'blue''は最後の宣言である' div'に 'color'を設定します。 http://stackoverflow.com/questions/1043001/what-is-the-meaning-of-cascading-in-css – guest271314

それらがドキュメントに追加されたときに<style>要素だけsheet性質を持っているためです。
したがって、文書を移動したり文書から削除すると、sheetプロパティはnullに戻されます。 insertRuleメソッドを使ってそれに適用したすべてのルールは、<style>のinnerHTMLの内部にないので消えてしまいます。 the specsの

関連部分：

次のように更新CSSためstyleブロックアルゴリズム（text/css）は次のとおりです。

要素はstyle要素とします。

エレメントに関連付けられたCSSスタイルシートがある場合は、問題のCSSスタイルシートを削除します。

要素がドキュメント内に存在しない場合、これらの手順を中止します。

コンテンツセキュリティポリシー[...]によってShould要素のインライン動作がブロックされた場合、これらの手順を中止します。 [CSP]

は、次のプロパティとCSSスタイルシートを作成します...あなたが見ることができるように

、<style>要素が更新されるたびに、新しいCSSスタイルシートが作成されます（.3および.4がプロセスをブロックしていない場合に限る）。

小さなデモ：

var style = document.createElement('style'); 
 
snippet.log('before being appended : '+ style.sheet) 
 
document.body.appendChild(style); 
 
snippet.log('after being appended : '+ style.sheet) 
 
document.body.removeChild(style); 
 
snippet.log('after being removed : '+ style.sheet)

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> 
 
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

出典

2016-04-20 04:45:31 Kaiido

ありがとうございます。私はまだ、insertRuleで追加されたスタイルから手書きのテキストコンテンツを持っているスタイルでは、この動作を異なるものにすることは理解していません。それとも、なぜか尋ねるべきでしょうか？ 1つの方法でシートを廃棄する目的はないと思われます。 –

'insertRule'は' CSSStyleSheet'オブジェクトのメソッドであり、 '

CSSOMのinsertRuleを使用した後、スタイルが見えなくなり、スタイルタグが再追加できない

答えて