Insérer des styles à l'aide des astuces javascript

1. Utilisez javascript pour insérer le style Parfois, nous devons utiliser js pour générer dynamiquement du code CSS dans la balise de style de la page. 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 le fichier. élément de tête. 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, le nombre de balises de style sur une page est limité. S'il est dépassé, une erreur sera signalée.

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;}'); Copier après la connexion 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, afin que le nombre de feuilles de style ne dépasse pas le nombre de feuilles de style. limite dans IE.

Forfait :

Copier le code Le code est le suivant : 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; }');//Appel forfait Seajs

Copier le code Le code est le suivant : 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. Style d'insertion JavaScript Utilisez la balise dans pour introduire un fichier de style externe. C'est relativement simple et il n'y a aucun problème de compatibilité avec les principaux navigateurs : . Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Insérer des styles à l'aide des astuces javascript_javascript