Insérer des styles à l'aide des astuces javascript_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.

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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