DOM
CSS-stijlen gebruiken

Opmerkingen

Inline stijlen lezen en wijzigen

Inline stijl

U kunt de inline CSS-stijl van een HTML-element te manipuleren door simpelweg het lezen of zijn bewerkt style eigendom.

Ga uit van het volgende element:

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

Met deze JavaScript toegepast:

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;

Als width: 200px; werden ingesteld in een externe CSS-stylesheet, element.style.width = null zou geen effect hebben. In dit geval moet u de stijl opnieuw instellen op initial : element.style.width = 'initial' .

Stijlen uit een stylesheet lezen en wijzigen

element.style leest alleen CSS-eigenschappen die inline zijn ingesteld, als een elementkenmerk. Stijlen worden echter vaak ingesteld in een externe stylesheet. De werkelijke stijl van een element kan worden geopend met window.getComputedStyle(element) . Deze functie retourneert een object dat de werkelijke berekende waarde van alle stijlen bevat.

Vergelijkbaar met het voorbeeld van Inline stijlen lezen en wijzigen, maar nu staan de stijlen in een 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)