Veb səhifəsində elementin stillərini dinamik şəkildə…

Aşa aşağıdakı yanaşmalardan istifadə etmək mümkündür:

Elementin style xüsusiyyətini dəyişmək: Ən sadə üsul, birbaşa inline stilləri dəyişir.

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

CSS siniflərini əlavə etmək/çıxarmaq: Daha çevik yanaşma, CSS-də əvvəlcədən təyin olunmuş stillərə əsaslanır. Stil dəyişiklikləri siniflərin tətbiqi və ya çıxarılması ilə həyata keçirilir.

const element = document.getElementById('myElement');
element.classList.add('active'); // 'active' sinfi əlavə edir
element.classList.remove('inactive'); // 'inactive' sinfini çıxarır
element.classList.toggle('visible'); // 'visible' sinfini dəyişir

CSS-də:

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

CSS dəyişənlərini dəyişmək (CSS Xüsusi Xüsusiyyətlər): CSS-də istifadə olunan dəyişənlərin dəyərlərini dəyişməyə imkan verir, çox sayda elementin stillərinə eyni zamanda təsir edir.
```
const root = document.documentElement;
root.style.setProperty('--main-color', 'blue');
```
CSS-də:
```
:root {
    --main-color: #333;
}
.my-element {
    color: var(--main-color);
}
```
element.setAttribute('style', '...'): element.style-ə nisbətən daha az tövsiyə olunur, çünki bütün inline stilləri yenidən yazar.
```
const element = document.getElementById('myElement');
element.setAttribute('style', 'color: green; border: 1px solid black;');
```

<style> elementini yaratmaq və daxil etmək: Dinamik olaraq yeni CSS qaydalarını səhifəyə əlavə etməyə imkan verir.

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

Stil cədvəllərini dəyişmək (document.styleSheets): Birbaşa Style Sheet obyektləri ilə qarşılıqlı əlaqə. Daha mürəkkəb və gündəlik inkişafda daha az yayılmışdır.

Metod seçimi vəzifədən asılıdır: element.style kiçik və nöqtəvi dəyişikliklər üçün əlverişlidir; siniflər vəziyyətləri və mürəkkəb stilləri idarə etmək üçün üstünlük təşkil edir; CSS dəyişənləri mövzular və qlobal tənzimləmələr üçün faydalıdır.

Veb səhifəsində elementin stillərini dinamik şəkildə necə dəyişmək olar?