Eleman Stilini Değiştirme

Coddy'nin JavaScript DOM Metotları kursunda ders 4 / 13.

Öğreneceğimiz bir sonraki özellik, mevcut stillendirmeyi değiştirmekten sorumlu olan style özelliğidir. Stillendirmeyi şu şekilde değiştirebilirsiniz:

const element = document.getElementById("elementID");
element.style.color = "green";

Bu koddan sonra, #elementID öğesinin rengi green olarak değiştirilecektir.

Görev

Kolay

Bir ID'ye sahip div içeren bir HTML kodu size verilmiştir.

Sadece JavaScript kullanarak, bu div öğesinin arka plan rengini red olarak değiştirin:

getElementById fonksiyonunu kullanarak öğeyi alın.
style.backgroundColor özelliğini kullanarak öğenin arka plan rengi stilini değiştirin.

Kendin dene

<!DOCTYPE html>
<html>
    <body>
        <div id="box" style="width: 100px; height: 100px;">Content</div>
        <script src="script.js"></script>
    </body>
</html>

JavaScript DOM Metotları bölümündeki tüm dersler

1Giriş

Giriş Document Object Model

2DOM Metotları I

getElementByIdEleman Stilini DeğiştirmegetElementsByClassName Döngü ile Gezinme ve Düzenleme getElementsByTagName querySelector

3DOM Metotları II

querySelectorAll addEventListener innerHTML createElement ve appendChild classList toggle