DOM
Korzystanie ze stylów CSS

Uwagi

Czytanie i zmiana stylów wbudowanych

Styl wbudowany

Możesz manipulować wbudowanym stylem CSS elementu HTML, po prostu czytając lub edytując jego właściwość style .

Załóżmy następujący element:

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

Po zastosowaniu tego JavaScript:

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;

Jeśli jednak width: 200px; zostały ustawione w zewnętrznym arkuszu stylów CSS, element.style.width = null nie miałby żadnego efektu. W takim przypadku, aby zresetować styl, musisz ustawić go na initial : element.style.width = 'initial' .

Czytanie i zmiana stylów z arkusza stylów

element.style odczytuje tylko właściwości CSS ustawione w linii, jako atrybut elementu. Jednak style są często ustawiane w zewnętrznym arkuszu stylów. Rzeczywisty styl elementu można uzyskać za pomocą window.getComputedStyle(element) . Ta funkcja zwraca obiekt zawierający rzeczywistą obliczoną wartość wszystkich stylów.

Podobne do przykładu Czytanie i zmiana stylów wstawianych, ale teraz style znajdują się w arkuszu stylów:

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