Veb sahifasida elementning uslublarini dinamik tarzda…

Quyidagi yondashuvlardan foydalanish mumkin:

Elementning style xususiyatini o'zgartirish: Eng oddiy usul, to'g'ridan-to'g'ri inline uslublarni o'zgartiradi.

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

CSS sinflarini qo'shish/olib tashlash: Ko'proq moslashuvchan yondashuv, CSSda oldindan belgilangan uslublarga asoslangan. Uslublar sinflarni qo'llash yoki olib tashlash orqali o'zgaradi.

const element = document.getElementById('myElement');
element.classList.add('active'); // 'active' sinfini qo'shadi
element.classList.remove('inactive'); // 'inactive' sinfini olib tashlaydi
element.classList.toggle('visible'); // 'visible' sinfini o'zgartiradi

CSSda:

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

CSS o'zgaruvchilarini o'zgartirish (CSS Maxsus Xususiyatlar): CSSda ishlatiladigan o'zgaruvchilarning qiymatlarini o'zgartirish, bir vaqtning o'zida ko'plab elementlarning uslublariga ta'sir qiladi.
```
const root = document.documentElement;
root.style.setProperty('--main-color', 'blue');
```
CSSda:
```
:root {
    --main-color: #333;
}
.my-element {
    color: var(--main-color);
}
```

element.setAttribute('style', '...'): element.style ga nisbatan kamroq tavsiya etiladi, chunki barcha inline uslublarni yozib oladi.

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

<style> elementini yaratish va joylashtirish: Sahifaga dinamik ravishda yangi CSS qoidalarini qo'shish imkonini beradi.

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

Stil jadvallarini o'zgartirish (document.styleSheets): Style Sheet obyektlari bilan to'g'ridan-to'g'ri ishlash. Bu ko'proq murakkab va kundalik rivojlanishda kamroq qo'llaniladi.

Usulni tanlash vazifaga bog'liq: element.style kichik, nuqtali o'zgarishlar uchun qulay; sinflar holatlarni va murakkab uslublarni boshqarish uchun afzal; CSS o'zgaruvchilari mavzular va global sozlamalar uchun yaxshi.

Veb sahifasida elementning uslublarini dinamik tarzda qanday o'zgartirish mumkin?