ユーザーがCSSにルールを挿入する

Question

ユーザーがドロップダウンからプロパティを選択してサイトのスタイルを変更できるようにします。要素が選択されると、関数はその規則をCSSに挿入します。私はそのJavaScriptコードが次のようなものだと思った：

var sheet = document.styleSheets[]; 
sheet.insertRule(rule,index); 

しかし、私はそれを動作させることはできません。最初に、関数は特定のスタイル記述の値がすでに存在するかどうかをチェックする必要があります。その場合は、新しいルールを追加する前にルールを削除する必要があります。スタイルシートやないのリスト - だから、インデックス1に16のフォントサイズを追加しようとしていると、それはそれを上書きするフォントサイズは、すでに存在する場合、それ以外の場合は、単にルールを追加する必要があります...

Answer 1

document.styleSheetsはStyleSheetListを返します。特定のスタイルシート、insertRuleはCSSStyleSheetのメソッドです。このメソッドを使用するには、リストから特定のスタイルシートを選択する必要があります。

second example hereをご覧ください。彼らはdocument.createElementを使用して新しいスタイルシートを作成し、頭に追加して、このスタイルシートに新しいルールを挿入しました。このような何か：あなたは、各シートを反復処理し、新しいものと一致したルールがすでに存在しているかどうかを確認するために支配する必要がありますので

var styleElem = document.createElement('style'); 
document.head.appendChild(styleElem); 
styleElem.sheet.insertRule(...); 

既存のルールの確認が困難です。

ほとんどの場合、ブラウザーは最後のルールを使用して以前のルールを上書きします（ただし、!importantキーワードがない限り）。

Answer 2

あなたの質問を正しく理解していれば、あなたのウェブサイトや特定の要素のCSSを変更するのにjQueryを使用してみてはいかがですか？

css（{"propertyname"： "value"、 "propertyname"： "value"、...}）;

例：

**

$(document).ready(function(){ 
    $("button").click(function(){ 
     $("p").css({"background-color": "yellow", "font-size": "200%"}); 
    }); 
}); 

**