Comment ajouter des styles au CSS en utilisant JavaScript

Méthode Add : 1. Utilisez l'objet de style ; 2. Utilisez setAttribute ; 3. Utilisez setProperty ; 4. Modifiez dynamiquement le style du pseudo-élément en modifiant la classe du parent du pseudo-élément ; introduire un nouveau fichier de style CSS ; 7. Utilisez addRule et i

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

Utilisez JS pour définir dynamiquement les styles CSS. Les plus courants sont les suivants

1 Définissez directement l'attribut de style Dans certains cas, utilisez ce paramètre ! écrivez-le en casse chameau (comme textAlign) Si vous souhaitez conserver le signe -, utilisez la forme de crochets element.style['text-align'] = '100px';

element.style.height = '100px';

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

element.setAttribute('height', 100);

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

3. Définissez les attributs 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. Changez la classe, comme la méthode de changement de classe de JQ

Parce que JS ne peut pas obtenir le pseudo-élément CSS, vous pouvez changer dynamiquement le style du pseudo-élément en changeant la classe du pseudo-élément. parent

element.className = 'blue';
element.className += 'blue fb';

6. Définir cssText

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

7. Créer et introduire un nouveau fichier 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. Utiliser 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!