JavaScript_php の例を使用して新しいスタイルシートと新しいスタイル ルールを作成する

今日の時代では、Web ページで JavaScript を多用することが一般的になっており、Web ページを最適化し、高速化するためのさまざまな方法を見つける必要があります。イベント委任を使用してイベント リスナーの効率を高め、頻度削減テクノロジーを使用して特定のメソッドの使用回数を制限し、さまざまな JavaScript ローダーを使用して必要なリソースを動的にロードします。ページをより効率的かつ機敏にするもう 1 つの方法は、DOM 要素をクエリしたり、各要素にスタイルを調整したりすることなく、スタイル シート内のスタイルを動的に追加または削除することです。このテクニックの使い方を見てみましょう！

キャプチャ スタイル シート

ページでは複数のスタイル ファイルを参照する場合があり、そのうちの 1 つを選択できます。指定すると、HTML ページの LINK タグと STYLE タグに ID を追加して区別し、document.styleSheets オブジェクトに格納されている CSSStyleSheet オブジェクトを取得できます。

var sheets = document.styleSheets; // 返回一个StyleSheetList数组

/*
返回： 

StyleSheetList {
0: CSSStyleSheet, 
1: CSSStyleSheet, 
2: CSSStyleSheet, 
3: CSSStyleSheet, 
4: CSSStyleSheet,
5: CSSStyleSheet, 
6: CSSStyleSheet, 
7: CSSStyleSheet, 
8: CSSStyleSheet, 
9: CSSStyleSheet, 
10: CSSStyleSheet, 
11: CSSStyleSheet, 
12: CSSStyleSheet, 
13: CSSStyleSheet, 
14: CSSStyleSheet, 
15: CSSStyleSheet, length: 
16, item: 
function
}
*/

// 找到你想要修改的样式表
var sheet = document.styleSheets[0];

注意すべき重要なことは、スタイル シートの media 属性です。注意しないと、必要なときにいつでも使用できます。画面表示用のスタイルシートを変更する際に、誤って印刷用のスタイルシートを変更してしまう可能性があります。 CSSStyleSheet オブジェクトにはさまざまなプロパティ情報があり、必要に応じて取得できます。

// Get info about the first stylesheet
console.log(document.styleSheets[0]);

/*
返回结果： 

CSSStyleSheet
 cssRules: CSSRuleList
 disabled: false
 href: "http://davidwalsh.name/somesheet.css?1.1.2"
 media: MediaList
 ownerNode: link
 ownerRule: null
 parentStyleSheet: null
 rules: CSSRuleList
 title: null
 type: "text/css"
*/

// Get the media type
console.log(document.styleSheets[0].media.mediaText)
/*
Returns:
 "all" or "print" or whichever media is used for this stylesheet
*/

スタイル シートをキャプチャしてそこに新しいスタイル ルールを追加するには、さまざまな方法があります。

新しいスタイル シートを作成する

ほとんどの場合、最良の方法は、新しい STYLE 要素を作成し、それにルールを動的に追加することです。非常に単純です:

var sheet = (function() {
 // Create the <style> tag
 var style = document.createElement("style");
 
 // 如果你愿意的话，可以添加media属性 (或 media query) 
 // style.setAttribute("media", "screen")
 // style.setAttribute("media", "@media only screen and (max-width : 1024px)")
 
 // WebKit 补丁 
 style.appendChild(document.createTextNode(""));
 
 // Add the <style> element to the page
 document.head.appendChild(style);
 
 return style.sheet;
})();

残念ながら、WebKit タイプのブラウザでは、上記のコードを正しく実行するには少し変更する必要がありますが、何があっても、必要なシートを取得できます。

スタイル ルールの追加 – 標準の addRule メソッド

CSSStyleSheet オブジェクトには addRule メソッドがあり、セレクター、スタイル ルールの CSS コード、および 3 つのパラメーターを受け入れることができます。スタイル シートの位置 (同じセレクターを基準とした) を示す整数:

sheet.addRule("#myList li", "float: left; background: red ! important;", 1);
位置のデフォルト値は -1 で、これは最後に配置されることを意味します。追加の制御または遅延書き込みの場合は、ルールに ! important を追加して、位置の問題を排除できます。 addRule を呼び出すと -1 が返されますが、これには何も意味がありません。

このテクノロジーの利点は、ページにスタイル ルールを動的に追加して適用できることです。各要素を操作する必要がなく、ブラウザーがこれらのルールを自動的に適用します。効率的にしましょう！

新しいスタイル ルール

CSSStyleSheet オブジェクトには insertRule メソッドもありますが、このメソッドは初期の IE では使用できませんでした。 insertRule メソッドは、addRule メソッドの最初の 2 つのパラメータを組み合わせます:

sheet.insertRule("header { float: left; opacity: 0.8; }", 1);

このメソッドは見た目は醜いですが、間違いなく非常に便利です。

スタイル ルールの安全な適用

すべてのブラウザが insertRule をサポートしているわけではないため、コードを効果的に実行するために何らかのカプセル化を行うことが最善です。以下は非常に単純なカプセル化メソッドです:

function addCSSRule(sheet, selector, rules, index) {
 if(sheet.insertRule) {
 sheet.insertRule(selector + "{" + rules + "}", index);
 }
 else {
 sheet.addRule(selector, rules, index);
 }
}
 
// Use it!
addCSSRule(document.styleSheets[0], "header", "float: left");

このメソッドはさまざまな状況に対処できます。このメソッドのコードを個別に使用する場合は、try{}catch(e){} でコードをラップするのが最善です。

メディア クエリのスタイル ルールを追加する

特定のメディア クエリにスタイル ルールを追加するには 2 つの方法があります。 1 つ目は、標準の insertRule メソッドを使用する方法です。

sheet.insertRule("@media only screen and (max-width : 1140px) { header { display: none; } }");

古い IE は insertRule をサポートしていないため、別の方法を使用できます。つまり、STYLE 要素を作成し、それに正しいメディア属性を与えてから、 「新しいスタイル ルールを追加する」に進みます。この方法では STYLE 要素が追加されますが、非常に簡単です。

スタイル ルールをスタイル シートに動的に追加することは、非常に効率的で簡単なテクノロジだと思います。次回のアプリケーションでこのテクニックを忘れずに試してみてください。多くの労力を節約できます。

上記は、JavaScript を使用して新しいスタイル シートと新しいスタイルの rules_php インスタンスを作成する内容です。さらに関連した内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。