Właściwość stylu HTML DOM
Przykład
Dodaj czerwony kolor do elementu <h1>:
document.getElementById("myH1").style.color = "red";
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Właściwość style zwraca obiekt CSSStyleDeclaration, który reprezentuje atrybut stylu elementu.
Właściwość style służy do pobierania lub ustawiania określonego stylu elementu przy użyciu różnych właściwości CSS.
Uwaga: Nie można ustawić stylów poprzez przypisanie ciągu do właściwości stylu, np. element .style = "kolor: czerwony;". Aby ustawić styl elementu, dołącz właściwość „CSS” do stylu i określ wartość, na przykład:
element.style.backgroundColor = "red"; // set the background color of an element to red
Jak widać, składnia JavaScript do ustawiania właściwości CSS jest nieco inna niż CSS (backgroundColor zamiast background-color).
Aby zapoznać się z listą wszystkich dostępnych właściwości, zobacz Odniesienie do obiektów stylu .
Uwaga: Właściwość style zwraca tylko deklaracje CSS ustawione w atrybucie stylu wbudowanego elementu, np.
<p style="color: red;">. Nie jest możliwe użycie tej właściwości w celu uzyskania informacji o regułach stylów z sekcji <head> w dokumencie lub zewnętrznych arkuszach stylów.
Możesz jednak uzyskać dostęp do elementu <style> z <head> za pomocą document.getElementsByTagName():
var x = document.getElementsByTagName("STYLE")[0]; // get the first <style> element
Uwaga: Zaleca się użycie właściwości style zamiast metody element .setAttribute("style", "...") , ponieważ właściwość style nie nadpisze innych właściwości CSS, które mogą być określone w atrybucie style.
Obsługa przeglądarki
| Property | |||||
|---|---|---|---|---|---|
| style | Yes | Yes | Yes | Yes | Yes |
Składnia
Właściwości stylu zwrotu:
element.style.property
Ustaw właściwości stylu:
element.style.property = value
Wartości nieruchomości
| Value | Description |
|---|---|
| value |
Specifies the value of the specified property. For example, for the borderBottom property: element.style.borderBottom = "2px solid red"; |
Szczegóły techniczne
| Wartość zwrotu: | Obiekt CSSStyleDeclaration, reprezentujący atrybut stylu elementu |
|---|---|
| Wersja DOM | Dom Poziom 2 CSS |
Więcej przykładów
Przykład
Pobierz wartość górnej granicy elementu <p>:
var x = document.getElementById("myP").style.borderTop;
Powiązane strony
Samouczek CSS : Samouczek CSS
Dokumentacja CSS: Właściwości CSS
Odniesienie HTML DOM: Odniesienie do obiektu stylu
Odniesienie HTML: tag HTML <style>
❮ Obiekt elementu