Sisipkan gaya menggunakan petua javascript_javascript

1. Gunakan javascript untuk memasukkan c9ccee2e6ea535a969eb3f532ad9fe89 Kadangkala kita perlu menggunakan js untuk menjana kod css secara dinamik dalam teg gaya pada halaman Kaedah ini sangat mudah, iaitu, terus mencipta elemen gaya, kemudian tetapkan kod css dalam elemen gaya, dan akhirnya memasukkannya ke dalam. unsur kepala.
Tetapi terdapat beberapa isu keserasian yang perlu kami selesaikan. Pertama sekali, dalam pelayar yang mematuhi piawaian w3c, kita hanya perlu memasukkan kod css untuk dimasukkan ke dalam elemen gaya sebagai nod teks Dalam IE, kita perlu menggunakan styleSheet.cssText elemen gaya untuk menyelesaikannya masalah.

Perlu diambil perhatian bahawa dalam beberapa versi IE, bilangan teg gaya pada halaman adalah terhad. Jika melebihi, ralat akan dilaporkan.

function addCSS(cssText){
 var style = document.createElement('style'), //创建一个style元素
  head = document.head || document.getElementsByTagName('head')[0]; //获取head元素
 style.type = 'text/css'; //这里必须显示设置style元素的type属性为text/css，否则在ie中不起作用
 if(style.styleSheet){ //IE
  var func = function(){
   try{ //防止IE中stylesheet数量超过限制而发生错误
    style.styleSheet.cssText = cssText;
   }catch(e){

   }
  }
  //如果当前styleSheet还不能用，则放到异步中则行
  if(style.styleSheet.disabled){
   setTimeout(func,10);
  }else{
   func();
  }
 }else{ //w3c
  //w3c浏览器中只要创建文本节点插入到style元素中就行了
  var textNode = document.createTextNode(cssText);
  style.appendChild(textNode);
 }
 head.appendChild(style); //把创建的style元素插入到head中 
}

//使用
addCSS('#demo{ height: 30px; background:#f00;}');

Sudah tentu, ini hanyalah kaedah tunjuk cara yang paling asas, dan ia perlu diperbaiki dalam aplikasi sebenar Sebagai contoh, masukkan kod css yang dijana setiap kali ke dalam elemen gaya, supaya bilangan helaian gaya tidak akan melebihi. had dalam IE.

Pakej:

Salin kod Kod adalah seperti berikut:var importStyle=function importStyle(b){var a= document.createElement ("style"),c=document;c.getElementsByTagName("head")[0].appendChild(a);if(a.styleSheet){a.styleSheet.cssText=b}else{a.appendChild (c. createTextNode(b))}};

importStyle('h1 { background: red; }');//Panggil

pakej seajs

Salin kod Kod adalah seperti berikut:seajs.importStyle=function importStyle(b){var a =document. createElement("style"),c=document;c.getElementsByTagName("head")[0].appendChild(a);if(a.styleSheet){a.styleSheet.cssText=b}else{a. appendChild(c .createTextNode(b))}};

2. Gaya sisipan JavaScript 7121e90d5b1bcf6c91be315928d34e5d dalam 93f0f5c25f18dab9d176bd4f6de5d30e untuk memperkenalkan fail gaya luaran Ini agak mudah dan tiada masalah keserasian dengan penyemak imbas utama:

function includeLinkStyle(url) {
var link = document.createElement(“link”);
link.rel = “stylesheet”;
link.type = “text/css”;
link.href = url;
document.getElementsByTagName(“head”)[0].appendChild(link);
}

includeLinkStyle(“http://css.xxx.com/home/css/reset.css?v=20101227”);

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.