JavaScript HTML DOM - Zmiana CSS
HTML DOM umożliwia JavaScriptowi zmianę stylu elementów HTML.
Zmiana stylu HTML
Aby zmienić styl elementu HTML, użyj następującej składni:
document.getElementById(id).style.property = new style
Poniższy przykład zmienia styl <p>
elementu:
Przykład
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
</body>
</html>
Korzystanie z wydarzeń
HTML DOM umożliwia wykonanie kodu w przypadku wystąpienia zdarzenia.
Zdarzenia są generowane przez przeglądarkę, gdy „coś się dzieje” z elementami HTML:
- Element jest kliknięty
- Strona została załadowana
- Pola wejściowe zostały zmienione
Więcej o wydarzeniach dowiesz się w kolejnym rozdziale tego samouczka.
Ten przykład zmienia styl elementu HTML za pomocą id="id1"
, gdy użytkownik kliknie przycisk:
Przykład
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>
</body>
</html>
Więcej przykładów
Jak sprawić, by element był niewidoczny. Chcesz pokazać element czy nie?
Odniesienie do obiektu stylu DOM HTML
Aby zapoznać się ze wszystkimi właściwościami stylu HTML DOM, zapoznaj się z naszym kompletnym Odniesieniem do obiektu HTML DOM Style .