Fügen Sie Stile mithilfe von javascript_javascript-Tipps ein

1. Verwenden Sie Javascript, um den Stil c9ccee2e6ea535a969eb3f532ad9fe89 einzufügen Manchmal müssen wir js verwenden, um den CSS-Code im Style-Tag auf der Seite dynamisch zu generieren. Die Methode ist sehr einfach: Erstellen Sie direkt ein Style-Element, legen Sie dann den CSS-Code im Style-Element fest und fügen Sie ihn schließlich ein das Kopfelement.
Aber es gibt einige Kompatibilitätsprobleme, die wir lösen müssen. Zunächst müssen wir in Browsern, die den W3C-Standards entsprechen, nur den CSS-Code einfügen, der als Textknoten in das Stilelement eingefügt werden soll. Im IE müssen wir den styleSheet.cssText des Stilelements verwenden, um das Problem zu lösen Problem.

Es ist auch zu beachten, dass in einigen IE-Versionen die Anzahl der Style-Tags auf einer Seite begrenzt ist. Bei Überschreitung wird ein Fehler gemeldet.

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;}');

Natürlich ist dies nur die grundlegendste Demonstrationsmethode und muss in der tatsächlichen Anwendung verbessert werden. Fügen Sie beispielsweise den jedes Mal generierten CSS-Code in ein Stilelement ein, damit die Anzahl der Stylesheets nicht überschritten wird Grenze im IE Falsch.

Paket:

Code kopieren Der Code lautet wie folgt: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; }');//Call

Seajs-Paket

Code kopieren Der Code lautet wie folgt: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. JavaScript-Einfügung 52a25b17b52424c09a9e188108722f11 Verwenden Sie das 2cdf5bf648cf2f33323966d7f58a7f3f-Tag, um eine externe Stildatei einzuführen. Dies ist relativ einfach und es gibt keine Kompatibilitätsprobleme mit den wichtigsten Browsern:

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.