Heim > Web-Frontend > Front-End-Fragen und Antworten > So ändern Sie den CSS-Stil mit Javascript

So ändern Sie den CSS-Stil mit Javascript

青灯夜游
Freigeben: 2023-01-07 11:47:41
Original
2607 Leute haben es durchsucht

Modifikationsmethode: 1. Verwenden Sie „element.style.Attribute name="value"; 2. Verwenden Sie „Element.setAttribute('Attribute name','Value')"; ','Attribute name: value')"; 4. Verwenden Sie "element.className='value'".

So ändern Sie den CSS-Stil mit Javascript

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

1. Legen Sie das Attribut „style“ direkt fest. In einigen Fällen ist die Verwendung dieses wichtigen Werts ungültig Um das --Zeichen beizubehalten, verwenden Sie eckige Klammern Form element.style['text-align'] = '100px';

element.style.height = '100px';
Nach dem Login kopieren

2 Attribute direkt festlegen

(kann nur für bestimmte Attribute verwendet werden, verwandte Stile werden automatisch erkannt )

element.setAttribute('height', 100);
element.setAttribute('height', '100px');
Nach dem Login kopieren
3. Stileigenschaften festlegen

element.setAttribute('style', 'height: 100px !important');
Nach dem Login kopieren
4. Verwenden Sie setProperty

Wenn Sie !important festlegen möchten, wird empfohlen, diese Methode zum Festlegen des dritten Parameters zu verwenden

element.style.setProperty('height', '300px', 'important');
Nach dem Login kopieren

5. B. die klassenbezogene Änderungsmethode von JQ

Aufgrund der JS-Erfassung gibt es keine CSS-Pseudoelemente, sodass Sie den Stil der Pseudoelemente dynamisch ändern können, indem Sie die Klasse des übergeordneten Pseudoelements ändern

element.className = 'blue';
element.className += 'blue fb';
Nach dem Login kopieren

6

element.style.cssText = 'height: 100px !important';
element.style.cssText += 'height: 100px !important';
Nach dem Login kopieren
7. Neue CSS-Stildateien erstellen und einführen

  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;}');
Nach dem Login kopieren

8. Verwenden Sie 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);
Nach dem Login kopieren
[Empfohlenes Lernen: Javascript-Tutorial für Fortgeschrittene

]

Das obige ist der detaillierte Inhalt vonSo ändern Sie den CSS-Stil mit Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage