Heim  >  Artikel  >  Web-Frontend  >  So fügen Sie CSS mithilfe von JavaScript Stile hinzu

So fügen Sie CSS mithilfe von JavaScript Stile hinzu

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-07-22 15:07:306729Durchsuche

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

So fügen Sie CSS mithilfe von JavaScript Stile hinzu

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn