JavaScript HTML DOM - CSS değiştirmek

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

改变 HTML 样式

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

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

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

Örnek

<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>Üstteki paragraf betiği tarafından değiştirildi.</p>
</body>
</html>

Kişisel olarak deneyin

Olayları kullanma

HTML DOM, olaylar olduğunda kod çalıştırmanıza izin verir.

HTML elementinde 'birtakım şeyler' olduğunda, tarayıcı olaylar oluşturur:

  • Bir elemente tıklandığında
  • Sayfa yüklendiğinde
  • Giriş alanı değiştiğinde

Gelecek bölümde daha fazla olay hakkında bilgi öğreneceksiniz.

Bu örnek, kullanıcı butona tıkladığında id="id1" HTML elementinin stilini değiştirecektir:

Örnek

<!DOCTYPE html>
<html>
<body>
<h1 id="id1">Benim Başlık 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">
Bana tıkla!
</button>
</body>
</html>

Kişisel olarak deneyin

Daha Fazla Örnek

Görünürlük
Element görünürlüğünü nasıl yaparsınız. Elementi göstermek ister misiniz?

HTML DOM Style Nesnesi Referans Kılavuzu

Tüm HTML DOM stil özellikleri için ziyaret edin HTML DOM Style Nesnesi Referans Kılavuzu.