Bir web sayfasında bir öğenin stillerini dinamik…

Aşağıdaki yaklaşımları kullanabilirsiniz:

Elementin style özelliğini değiştirme: En basit yöntem, doğrudan satır içi stilleri değiştirir.

const element = document.getElementById('myElement');
element.style.color = 'red';
element.style.fontSize = '20px';

CSS sınıflarını ekleme/kaldırma: Daha esnek bir yaklaşım, CSS'de önceden tanımlanmış stillere dayanır. Stiller, sınıfların uygulanması veya kaldırılmasıyla değişir.

const element = document.getElementById('myElement');
element.classList.add('active'); // 'active' sınıfını ekler
element.classList.remove('inactive'); // 'inactive' sınıfını kaldırır
element.classList.toggle('visible'); // 'visible' sınıfını değiştirir

CSS'de:

.active {
    background-color: yellow;
}
.inactive {
    display: none;
}
.visible {
    opacity: 1;
}

CSS değişkenlerini değiştirme (CSS Özel Özellikleri): CSS'de kullanılan değişkenlerin değerlerini değiştirir, birçok elementin stilini aynı anda etkiler.

const root = document.documentElement;
root.style.setProperty('--main-color', 'blue');

CSS'de:

:root {
    --main-color: #333;
}
.my-element {
    color: var(--main-color);
}

element.setAttribute('style', '...'): element.style'a kıyasla daha az önerilir, çünkü tüm satır içi stilleri üzerine yazar.

const element = document.getElementById('myElement');
element.setAttribute('style', 'color: green; border: 1px solid black;');

<style> elementi oluşturma ve ekleme: Sayfaya yeni CSS kuralları dinamik olarak eklemenizi sağlar.

const style = document.createElement('style');
style.innerHTML = '#myElement { background-color: lightblue; }';
document.head.appendChild(style);

Stil sayfalarını değiştirme (document.styleSheets): Stil sayfası nesneleriyle doğrudan etkileşim. Daha karmaşık ve günlük geliştirmede daha az yaygındır.

İşleme göre yöntemi seçmek: element.style küçük ve noktasal değişiklikler için uygundur; sınıflar durumları ve karmaşık stilleri yönetmek için tercih edilir; CSS değişkenleri temalar ve küresel ayarlar için iyidir.

Bir web sayfasında bir öğenin stillerini dinamik olarak nasıl değiştirebilirsiniz?