Comment modifier le style CSS avec javascript-Questions et réponses frontales-php.cn

Comment modifier le style CSS avec javascript

青灯夜游

Libérer： 2023-01-07 11:47:41

original

2541 Les gens l'ont consulté

Méthode de modification : 1. Utilisez "element.style.Attribute name="value"" ; 2. Utilisez "Element.setAttribute('Attribute name','Value')" ; ','Nom de l'attribut : valeur')"; 4. Utilisez "element.className='value'".

Comment modifier le style CSS avec javascript

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

1. Définissez directement l'attribut de style Dans certains cas, utilisez ce paramètre ! pour conserver le signe -, utilisez des crochets Form element.style['text-align'] = '100px';

element.style.height = &#39;100px&#39;;

Copier après la connexion

2 Définir les attributs directement

(ne peut être utilisé que pour certains attributs, les styles associés seront automatiquement reconnus. )

element.setAttribute(&#39;height&#39;, 100);
element.setAttribute(&#39;height&#39;, &#39;100px&#39;);

Copier après la connexion

3. Définir les propriétés de style

element.setAttribute(&#39;style&#39;, &#39;height: 100px !important&#39;);

Copier après la connexion

4. Utilisez setProperty

Si vous souhaitez définir !important, il est recommandé d'utiliser cette méthode pour définir le troisième paramètre

element.style.setProperty(&#39;height&#39;, &#39;300px&#39;, &#39;important&#39;);

Copier après la connexion

5. comme la méthode liée au changement de classe de JQ

En raison de l'acquisition de JS, il n'y a pas de pseudo-éléments CSS, vous pouvez donc changer dynamiquement le style des pseudo-éléments en changeant la classe du parent du pseudo-élément

element.className = &#39;blue&#39;;
element.className += &#39;blue fb&#39;;

Copier après la connexion

element.style.cssText = &#39;height: 100px !important&#39;;
element.style.cssText += &#39;height: 100px !important&#39;;

Copier après la connexion

7. Créez et introduisez de nouveaux fichiers de style CSS

  function addNewStyle(newStyle) {
            var styleElement = document.getElementById(&#39;styles_js&#39;);

            if (!styleElement) {
                styleElement = document.createElement(&#39;style&#39;);
                styleElement.type = &#39;text/css&#39;;
                styleElement.id = &#39;styles_js&#39;;
                document.getElementsByTagName(&#39;head&#39;)[0].appendChild(styleElement);
            }
            
            styleElement.appendChild(document.createTextNode(newStyle));
        }

        addNewStyle(&#39;.box {height: 100px !important;}&#39;);

Copier après la connexion

8. Utilisez addRule, insertRule

// 在原有样式操作
        document.styleSheets[0].addRule(&#39;.box&#39;, &#39;height: 100px&#39;);
        document.styleSheets[0].insertRule(&#39;.box {height: 100px}&#39;, 0);

        // 或者插入新样式时操作
        var styleEl = document.createElement(&#39;style&#39;),
            styleSheet = styleEl.sheet;

        styleSheet.addRule(&#39;.box&#39;, &#39;height: 100px&#39;);
        styleSheet.insertRule(&#39;.box {height: 100px}&#39;, 0);

        document.head.appendChild(styleEl);

Copier après la connexion

[Apprentissage recommandé : Tutoriel avancé javascript
]
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!