So fügen Sie CSS mithilfe von JavaScript Stile hinzu

Methode hinzufügen: 1. Verwenden Sie setAttribute; 3. Ändern Sie den Stil des Pseudoelements dynamisch, indem Sie die Klasse des Pseudoelements ändern Einführung einer neuen CSS-Stildatei; 7. Verwenden Sie addRule und i

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Verwenden Sie JS, um CSS-Stile dynamisch festzulegen: 1. In einigen Fällen ist dieser wichtige Wert ungültig. Schreiben Sie es in Kamel-Schreibweise (z. B. textAlign). Wenn Sie das - Zeichen beibehalten möchten, verwenden Sie die Form von eckigen Klammern element.style['text-align'] = '100px';

element.style.height = '100px';

2. Legen Sie die Attribute direkt fest ( (kann nur für bestimmte Attribute verwendet werden, die zugehörigen Stile werden automatisch identifiziert)

element.setAttribute('height', 100);

3. Legen Sie die Attribute des Stils fest

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

4 Dritter Parameter

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

5. Ändern Sie die Klasse, z. B. die klassenbezogene Methode von JQ.

Da JS das Pseudoelement von CSS nicht erhalten kann, können Sie den Stil des Pseudoelements dynamisch ändern, indem Sie die Klasse des übergeordneten Pseudoelements ändern element

element.style.setProperty('height', '300px', 'important');

6. CSSText festlegen

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

7. Erstellen und führen Sie eine neue CSS-Stildatei

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

8. Verwenden Sie addRule, insertRule

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;}');

[Empfohlenes Lernen:

Javascript-Tutorial für Fortgeschrittene

]

Das obige ist der detaillierte Inhalt vonSo fügen Sie CSS mithilfe von JavaScript Stile hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!