Detaillierte Einführung in die Details, wie JavaScript zwei Methoden verwendet, um CSS-Code dynamisch zu generieren.

In diesem Artikel werden hauptsächlich zwei Methoden zum dynamischen Generieren von CSS-Code mit Javascript vorgestellt. Manchmal müssen wir js verwenden, um CSS-Code im Style-Tag auf der Seite zu generieren . Methoden, Freunde in Not können sich auf

Zwei Methoden zum dynamischen Generieren von CSS-Code in Javascript beziehen

Manchmal müssen wir js verwenden, um das Style-Tag im zu generieren Seite CSS-Code, die Methode ist sehr einfach, das heißt, erstellen Sie direkt ein Stilelement, legen Sie dann den CSS-Code im Stilelement fest und fügen Sie ihn schließlich in das head-Element ein. Es gibt jedoch einige Kompatibilitätsprobleme, die wir lösen müssen. Zunächst müssen wir in Browsern, die dem w3c-Standard entsprechen, nur den CSS-Code einfügen, der als Textknoten in das Stilelement eingefügt werden soll. Im IE müssen wir styleSheet.cssText verwenden des Stilelements lösen. 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.

Methode 1:

Fügen Sie einen ID-Namen zum 0c1c5a64e17b6dfe42b59c3563e43ede hinzu und schreiben Sie

var oCss=document.getElementById("css");

oCss.innerHTML+="#box{width:200px;}";

Auf diese Weise können Sie Stile hinzufügen.

Methode 2:

Manchmal müssen wir js verwenden, um den CSS-Code im Style-Tag auf der Seite dynamisch zu generieren. Erstellen Sie direkt ein Stilelement, legen Sie dann den CSS-Code im Stilelement fest und fügen Sie ihn schließlich in das Kopfelement ein. Es gibt jedoch 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 es in einigen IE-Versionen eine Begrenzung für die Anzahl der Style-Tags auf einer Seite gibt. Wenn diese überschritten wird, wird ein Fehler gemeldet.

Fügen Sie den Code direkt unten ein und lesen Sie die

Anmerkung für Anweisungen.

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 dies der Fall ist Funktioniert nicht im IE. Es ist ein Fehler aufgetreten, dass die Anzahl der Stylesheets das Limit überschritten hat.

Zusammenfassung: Die oben genannten Methoden können viele Probleme lösen. Wenn Sie Fragen haben, kontaktieren Sie mich bitte!

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Details, wie JavaScript zwei Methoden verwendet, um CSS-Code dynamisch zu generieren.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!