DOM
Använda CSS-stilar

Anmärkningar

Läsa och ändra inline stilar

Inline stil

Du kan manipulera inline CSS stil med en HTML-element genom att helt enkelt läsa eller redigera sin style egendom.

Antag följande element:

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

Med denna JavaScript tillämpad:

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;

Men om width: 200px; sattes i ett externt CSS-formatmall, element.style.width = null skulle inte ha någon effekt. I detta fall måste du ställa in den till initial : element.style.width = 'initial' att återställa stilen.

Läsa och ändra stilar från ett formatmall

element.style läser bara CSS-egenskaper som är inline, som ett elementattribut. Stilar ställs emellertid ofta in i ett externt formatmall. Den faktiska stilen för ett element kan nås med window.getComputedStyle(element) . Denna funktion returnerar ett objekt som innehåller det faktiska beräknade värdet för alla stilar.

Liknar exempel på läsning och ändring av inlineformat, men nu finns stilarna i ett formatmall:

<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)