JavaScript DOM: Web Sayfası Üzerindeki Stilleri Değiştirme

eminbasbayan

4 dk okuma

JavaScript DOM: Web Sayfası Üzerindeki Stilleri Değiştirme

🔍 Büyütmek için tıklayın

İçindekiler

Bu yazıda neler var?

Web sayfaları sadece HTML ile iskelet haline gelir. Görsel görünüm ve düzen CSS ile sağlanırken, bu sayfanın dinamik olarak değiştirilmesi JavaScript’in alanıdır. JavaScript sayesinde bir elementin rengi değiştirilebilir, yazı tipi büyütülebilir ya da kenarlık eklenebilir. Bu makalede, bir HTML elementinin stilini JavaScript kullanarak nasıl değiştirebileceğimizi, hangi yolların etkili olduğunu ve nelere dikkat etmemiz gerektiğini sade bir dille inceleyeceğiz.

1. JavaScript ile Stil Değiştirme: `element.style`

Bir HTML elementinin stilini değiştirmek için önce onu JavaScript ile seçmemiz gerekir. Örneğin, sayfadaki ilk <p> etiketini seçelim:

const paragraf = document.querySelector('p');

Ardından bu öğeye ait stil özelliklerine .style üzerinden erişebiliriz:

paragraf.style.backgroundColor = 'lightgray';
paragraf.style.padding = '10px';

Yukarıdaki örnekte dikkat edilmesi gereken önemli bir detay var: CSS'de background-color diye yazılan özellik JavaScript’te backgroundColor olarak camelCase biçiminde yazılmak zorundadır. Çünkü JavaScript’te - (kısa çizgi) karakteri geçerli bir değişken adı içinde kullanılamaz.

CSS ve JavaScript Arasındaki Yazım Farkı

CSS	JavaScript
color	style.color
font-size	style.fontSize
border-top	style.borderTop

Yani stil isimlerini yazarken CSS’teki haliyle değil, JavaScript’in beklediği camelCase yapısıyla yazmalıyız.

2. `.style` ile Neleri Değiştirebiliriz?

.style özelliği sayesinde bir elementin rengini, yazı tipi büyüklüğünü, kenarlığını ve daha pek çok şeyini değiştirebiliriz. İşte birkaç örnek:

paragraf.style.border = '1px solid black';
paragraf.style.fontSize = '18px';
paragraf.style.textAlign = 'center';

Ancak burada önemli bir sınırlama var: .style yalnızca inline (HTML içinde doğrudan yazılmış) stilleri gösterir. Harici bir CSS dosyasında ya da <style> bloğunda tanımlanmış stiller .style özelliği ile okunamaz.

Örneğin:

/* style.css */
p {
  color: navy;
}

Yukarıdaki gibi bir CSS tanımı varsa, JavaScript ile şunu yazdığınızda:

console.log(paragraf.style.color); // ""

Sonuç boş string olacaktır. Çünkü bu stil, inline değil, harici CSS üzerinden verilmiştir.

3. Çok Sayıda Stil Değişikliği Yapmak Zor mu?

Eğer tek bir özelliği değiştirmek istiyorsanız .style ile bunu yapmak kolaydır. Ama eğer bir öğeye birkaç stil birden eklemeniz gerekiyorsa, her bir stil için ayrı satır yazmak gerekir:

paragraf.style.color = 'maroon';
paragraf.style.letterSpacing = '2px';
paragraf.style.lineHeight = '1.6';

Bu hem zaman alıcı hem de bakım açısından zorlayıcı olabilir. Bu yüzden çok sayıda stil uygulanacaksa genellikle bir CSS sınıfı (class) tanımlanarak JavaScript ile eklenmesi tercih edilir (bu konu bu videoda anlatılmadığı için burada detaylandırmıyoruz).

4. Tüm Benzer Öğelere Stil Uygulamak

JavaScript ile birden fazla öğeye aynı anda stil vermek de mümkündür. Örneğin sayfadaki tüm <button> etiketlerini seçip onların arka plan rengini değiştirmek için şöyle yaparız:

const butonlar = document.querySelectorAll('button');

for (let btn of butonlar) {
  btn.style.backgroundColor = '#4CAF50';
  btn.style.color = 'white';
}

Burada querySelectorAll ile tüm <button> etiketlerini bir listeye alıyoruz ve her biri için ayrı ayrı stil tanımlıyoruz.

5. Mevcut (Hesaplanmış) Stilleri Öğrenmek: `getComputedStyle()`

.style ile sadece inline olarak yazılmış stilleri görebiliyoruz. Peki ya harici bir CSS dosyasından gelen veya tarayıcı varsayılanı olan stilleri görmek istersek?

İşte burada devreye window.getComputedStyle() giriyor. Bu fonksiyon, bir öğenin o anki gerçek (hesaplanmış) stil değerlerini döner.

const computed = window.getComputedStyle(paragraf);
console.log(computed.fontSize);     // Örn: "16px"
console.log(computed.marginTop);    // Örn: "21.44px"
console.log(computed.fontFamily);   // Örn: "Arial"

Bu fonksiyonun döndürdüğü değerler genellikle string türündedir. Örneğin "16px" gibi. Eğer bu değeri sayısal bir işleme sokmak istiyorsanız, parseInt() veya parseFloat() gibi yöntemlerle önce dönüştürmeniz gerekir.

Örnek: Yazı Boyutunu 10px Büyütme

const mevcutBoyut = parseInt(computed.fontSize); // "16px" → 16
paragraf.style.fontSize = (mevcutBoyut + 10) + 'px'; // "26px"

6. Sonuç

JavaScript ile web sayfası üzerindeki stil özelliklerini değiştirmek oldukça güçlü bir yöntemdir. Ancak bazı sınırlamaları bilmek gerekir:

.style yalnızca inline stillerle çalışır
Harici veya <style> içinde tanımlanan stiller için getComputedStyle() kullanılmalıdır
Birçok stil değişikliği gerekiyorsa tek tek yazmak zahmetlidir, bunun yerine class eklemek daha uygundur
CSS özellikleri JavaScript’te camelCase biçiminde yazılır (örn. fontSize, backgroundColor)

Görünüm üzerinde kontrol kazanmak için bu yöntemleri öğrenmek başlangıç seviyesi bir JavaScript geliştiricisi için oldukça değerlidir. Bu temeller oturduktan sonra, stil değişikliklerini daha profesyonel şekilde yönetmek için CSS sınıfı kullanımı gibi yöntemlere geçilebilir.