Introduction détaillée aux détails de l'utilisation de JavaScript pour générer dynamiquement du code CSS de deux manières

Cet article présente principalement deux méthodes de génération dynamique de code CSS à l'aide de javascript Parfois, nous devons utiliser js pour générer dynamiquement du code CSS dans la balise de style de la page. .Méthodes, les amis dans le besoin peuvent se référer à

Deux méthodes pour générer dynamiquement du code CSS en javascript

Parfois, nous devons utiliser js pour générer dynamiquement la balise de style dans le. page code css, la méthode est très simple, c'est-à-dire créer directement un élément de style, puis définir le code css dans l'élément de style, et enfin l'insérer dans l'élément head. Mais nous devons résoudre certains problèmes de compatibilité. Tout d'abord, dans les navigateurs conformes à la norme w3c, il suffit d'insérer le code CSS à insérer dans l'élément de style en tant que nœud de texte. Dans IE, nous devons utiliser le styleSheet.cssText. de l’élément de style résoudre. Il convient également de noter que dans certaines versions d'IE, il existe une limite au nombre de balises de style sur une page. Si elle est dépassée, une erreur sera signalée.

Méthode 1 :

Ajoutez un nom d'identifiant à la balise 0c1c5a64e17b6dfe42b59c3563e43ede et écrivez

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

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

De cette façon, vous pouvez ajouter des styles.

Méthode 2 :

Parfois, nous devons utiliser js pour générer dynamiquement le code CSS dans la balise de style sur la page. créez directement un élément de style. Ensuite, définissez le code CSS dans l'élément de style, et enfin insérez-le dans l'élément head. Mais nous devons résoudre certains problèmes de compatibilité. Tout d'abord, dans les navigateurs conformes aux normes du w3c, il suffit d'insérer le code CSS à insérer dans l'élément de style en tant que nœud de texte. Dans IE, nous devons utiliser le styleSheet.cssText de l'élément de style pour résoudre le problème. problème. Il convient également de noter que dans certaines versions d'IE, il existe une limite au nombre de balises de style sur une page. Si elle est dépassée, une erreur sera signalée.

Mettez le code directement ci-dessous et consultez l'

annotation pour les instructions.

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

Bien sûr, ce n'est que la méthode de démonstration la plus basique, et elle doit être améliorée dans l'application réelle. Par exemple, insérez le code CSS généré à chaque fois dans un élément de style, pour qu'il le soit. ne fonctionne pas dans IE. Une erreur s'est produite lorsque le nombre de feuilles de style a dépassé la limite.

Résumé : Les méthodes ci-dessus peuvent résoudre de nombreux problèmes. Si vous avez des questions, veuillez me contacter !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!