Bagaimana untuk memasukkan CSS secara dinamik dalam kemahiran JavaScript_javascript

Apabila menulis komponen, kadangkala saya ingin merangkum beberapa gaya CSS yang berkaitan dengan ciri komponen dalam JS, supaya ia lebih padu dan mudah diubah. JS secara dinamik memasukkan CSS dalam dua langkah: Cipta 1 2. Gunakan kaedah insertRule atau addRule lembaran gaya untuk menambah gaya

1. Lihat helaian gaya

Lihat document.styleSheets dahulu dan buka halaman sesuka hati

Tiga yang pertama ialah fail CSS yang diperkenalkan melalui teg pautan, dan yang keempat ialah CSS yang diselaraskan dalam halaman melalui teg gaya. Ia mempunyai atribut berikut

Setiap cssRule mempunyai atribut berikut

CssText ialah kod sumber yang ditulis dalam gaya.

2. Masukkan CSS secara dinamik
Pertama, anda perlu mencipta objek gaya dan mengembalikan objek helaian gayanya

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

Tambah fungsi addCssRule seperti berikut

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

Perlu diambil perhatian bahawa pelayar standard menyokong insertRule, dan versi IE yang lebih rendah menyokong addRule.

Kod lengkap adalah seperti berikut

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

Jika ia hanya menyokong terminal mudah alih atau penyemak imbas moden, anda boleh mengalih keluar kod yang dinilai oleh versi IE yang lebih rendah

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

Di atas ialah kaedah memasukkan CSS dalam JavaScript secara dinamik. Saya harap ia akan membantu pembelajaran semua orang.