JavaScript HTML DOM - muuta CSS

HTML DOM 允许 JavaScript 更改 HTML 元素的样式。

改变 HTML 样式

如需更改 HTML 元素的样式，请使用此语法：

document.getElementById(id).style.property = new style

下面的例子更改了 <p> 元素的样式：

Esimerkki

<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>Yllä oleva kappale on muutettu skriptin avulla.</p>
</body>
</html>

Kokeile itse

Tapahtumien käyttö

HTML-DOM mahdollistaa koodin suorittamisen tapahtumien sattuessa.

Kun "jotakin tapahtuu" HTML-elementissä, selain luo tapahtuman:

  • Kun napsautetaan jokin elementti
  • Sivun latautuessa
  • Kun syöteala muuttuu

Opit seuraavassa luvussa lisää tapahtumista.

Tämä esimerkki muuttaa id="id1" HTML-elementin tyyliä, kun käyttäjä napsauttaa painiketta:

Esimerkki

<!DOCTYPE html>
<html>
<body>
<h1 id="id1">Oma otsikkoni 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">
Paina minua!
</button>
</body>
</html>

Kokeile itse

Lisää esimerkkejä

Näkyvyys
Miten tehdä elementistä näkymätön. Haluatko näyttää elementin?

HTML-DOM Style-objektin käyttöohje

Jos tarvitset kaikki HTML-DOM-tyyliominaisuudet, vierittele sivustollemme HTML-DOM Style-objektin käyttöohje.