Comment modifier le style CSS avec javascript

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'".

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 = '100px';

2 Définir les attributs directement

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

element.setAttribute('height', 100);
element.setAttribute('height', '100px');

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

element.setAttribute('style', 'height: 100px !important');

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('height', '300px', 'important');

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 = 'blue';
element.className += 'blue fb';

6.

element.style.cssText = 'height: 100px !important';
element.style.cssText += 'height: 100px !important';

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

  function addNewStyle(newStyle) {
            var styleElement = document.getElementById('styles_js');

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

        addNewStyle('.box {height: 100px !important;}');

8. Utilisez addRule, insertRule

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

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

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

        document.head.appendChild(styleEl);

[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!