So fügen Sie CSS dynamisch in JavaScript_Javascript-Kenntnisse ein

Beim Schreiben von Komponenten möchte ich manchmal einige CSS-Stile im Zusammenhang mit Komponentenfunktionen in JS kapseln, damit sie zusammenhängender und einfacher zu ändern sind. JS fügt CSS dynamisch in zwei Schritten ein: Erstellen Sie 1 2. Verwenden Sie die Methode insertRule oder addRule des Stylesheets, um Stile hinzuzufügen

1. Sehen Sie sich das Stylesheet an

Schauen Sie sich zuerst document.styleSheets an und öffnen Sie nach Belieben eine Seite

Die ersten drei sind CSS-Dateien, die über Link-Tags eingeführt werden, und die vierte ist CSS, das über Style-Tags in die Seite eingefügt wird. Es hat die folgenden Attribute

Jede cssRule hat die folgenden Attribute

Der CSSText ist genau der stilvoll geschriebene Quellcode.

2. CSS dynamisch einfügen
Zuerst müssen Sie ein Stilobjekt erstellen und sein Stylesheet-Objekt zurückgeben

/*
 * 创建一个 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;
}

Fügen Sie die Funktion addCssRule wie folgt hinzu

/*
 * 动态添加 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); 
 }
}

Es ist zu beachten, dass Standardbrowser insertRule unterstützen und niedrigere Versionen des IE addRule unterstützen.

Der vollständige Code lautet wie folgt

/*
 * 动态添加 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); 
  }
 }
}();

Wenn es nur mobile Endgeräte oder moderne Browser unterstützt, können Sie den Code entfernen, der von niedrigeren IE-Versionen beurteilt wird

/*
 * 动态添加 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);
 }
}();

Das Obige ist die Methode zum dynamischen Einfügen von CSS in JavaScript. Ich hoffe, dass sie für das Lernen aller hilfreich ist.