CSS_javascript スキルを動的に挿入する JavaScript メソッド

コンポーネントを作成するとき、コンポーネントの機能に関連するいくつかの CSS スタイルを JS でカプセル化して、より一貫性があり、変更が容易になるようにしたい場合があります。 JS は 2 つのステップで CSS を動的に挿入します。1 スタイル オブジェクト
を作成します。 2. スタイルシートの insertRule メソッドまたは addRule メソッドを使用してスタイルを追加します

1. スタイルシートを表示します

最初に document.styleSheets を見て、自由にページを開きます

最初の 3 つはリンク タグを通じて導入された CSS ファイルで、4 つ目はスタイル タグを通じてページにインライン化された CSS ファイルです。次の属性があります

各 cssRule には次の属性があります

cssText は、まさにスタイルで書かれたソース コードです。

2. CSS を動的に挿入します
まず、スタイル オブジェクトを作成し、そのスタイルシート オブジェクトを返す必要があります

/*
 * 创建一个 style， 返回其 stylesheet 对象
 * 注意：IE6/7/8中使用 style.stylesheet，其它浏览器 style.sheet
 */
function createStyleSheet() {
 var head = document.head || document.getElementsByTagName('head')[0];
 var style = document.createElement('style');
 style.type = 'text/css';
 head.appendChild(style);
 return style.sheet ||style.styleSheet;
}

次のように関数 addCssRule を追加します

/*
 * 动态添加 CSS 样式
 * @param selector {string} 选择器
 * @param rules {string} CSS样式规则
 * @param index {number} 插入规则的位置, 靠后的规则会覆盖靠前的
 */
function addCssRule(selector, rules, index) {
 index = index || 0;
 if (sheet.insertRule) { 
  sheet.insertRule(selector + "{" + rules + "}", index); 
 } else if (sheet.addRule) { 
  sheet.addRule(selector, rules, index); 
 }
}

標準ブラウザは insertRule をサポートし、IE の以前のバージョンは addRule をサポートすることに注意してください。
完全なコードは次のとおりです

/*
 * 动态添加 CSS 样式
 * @param selector {string} 选择器
 * @param rules {string} CSS样式规则
 * @param index {number} 插入规则的位置, 靠后的规则会覆盖靠前的
 */
var addCssRule = function() {
 // 创建一个 style， 返回其 stylesheet 对象
 // 注意：IE6/7/8中使用 style.stylesheet，其它浏览器 style.sheet
 function createStyleSheet() {
  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';
  head.appendChild(style);
  return style.sheet ||style.styleSheet;
 }
 
 // 创建 stylesheet 对象
 var sheet = createStyleSheet();
 
 // 返回接口函数
 return function(selector, rules, index) {
  index = index || 0;
  if (sheet.insertRule) { 
   sheet.insertRule(selector + "{" + rules + "}", index); 
  } else if (sheet.addRule) { 
   sheet.addRule(selector, rules, index); 
  }
 }
}();

モバイル端末や最新のブラウザのみをサポートする場合は、IE の下位バージョンで判断されたコードを削除できます

/*
 * 动态添加 CSS 样式
 * @param selector {string} 选择器
 * @param rules {string} CSS样式规则
 * @param index {number} 插入规则的位置, 靠后的规则会覆盖靠前的，默认在后面插入
 */
var addCssRule = function() {
 // 创建一个 style， 返回其 stylesheet 对象
 function createStyleSheet() {
  var style = document.createElement('style');
  style.type = 'text/css';
  document.head.appendChild(style);
  return style.sheet;
 }
 
 // 创建 stylesheet 对象
 var sheet = createStyleSheet();
 
 // 返回接口函数
 return function(selector, rules, index) {
  index = index || 0;
  sheet.insertRule(selector + "{" + rules + "}", index);
 }
}();

以上はJavaScriptに動的にCSSを挿入する方法です。皆様の学習のお役に立てれば幸いです。