DOM
CSS-Stile verwenden

Bemerkungen

Inline-Styles lesen und ändern

Inline-Stil

Sie können den Inline-CSS-Stil eines HTML-Elements bearbeiten, indem Sie einfach seine style Eigenschaft lesen oder bearbeiten.

Nehmen Sie folgendes Element an:

<div id="element_id" style="color:blue;width:200px;">abc</div>

Mit diesem JavaScript angewendet:

var element = document.getElementById('element_id');

// read the color
console.log(element.style.color); // blue

//Set the color to red
element.style.color = 'red';

//To remove a property, set it to null
element.style.width = null;
element.style.height = null;

Wenn jedoch width: 200px; In einem externen CSS-Stylesheet festgelegt, hätte element.style.width = null keine Auswirkung. In diesem Fall müssen Sie den Stil auf initial setzen, um ihn zurückzusetzen: element.style.width = 'initial' .

Stile aus einem Stylesheet lesen und ändern

element.style liest nur element.style CSS-Eigenschaften als Elementattribut. Stile werden jedoch häufig in einem externen Stylesheet festgelegt. Auf den tatsächlichen Stil eines Elements kann mit window.getComputedStyle(element) zugegriffen werden. Diese Funktion gibt ein Objekt zurück, das den tatsächlich berechneten Wert aller Stile enthält.

Ähnlich dem Beispiel Lesen und Ändern von Inline-Stilen, aber jetzt befinden sich die Stile in einem Stylesheet:

<div id="element_id">abc</div>
<style type="text/css">
    #element_id {
        color:blue;
        width:200px;
    }
</style>

JavaScript:

var element = document.getElementById('element_id');

// read the color
console.log(element.style.color); // '' -- empty string
console.log(window.getComputedStyle(element).color); // rgb(0, 0, 255)

// read the width, reset it, then read it again
console.log(window.getComputedStyle(element).width); // 200px
element.style.width = 'initial';
console.log(window.getComputedStyle(element).width); // 885px (for example)