Jak można dynamicznie zmieniać style elementu na…

Możesz użyć następujących podejść:

Zmiana właściwości style elementu: Najprostszy sposób, bezpośrednio modyfikuje style inline.

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

Dodawanie/usuwanie klas CSS: Bardziej elastyczne podejście, oparte na z góry zdefiniowanych stylach w CSS. Zmiany stylów zachodzą przez stosowanie lub usuwanie klas.

const element = document.getElementById('myElement');
element.classList.add('active'); // dodaje klasę 'active'
element.classList.remove('inactive'); // usuwa klasę 'inactive'
element.classList.toggle('visible'); // przełącza klasę 'visible'

W CSS:

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

Zmiana zmiennych CSS (Własne właściwości CSS): Pozwala na zmianę wartości zmiennych używanych w CSS, wpływając na style wielu elementów jednocześnie.

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

W CSS:

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

element.setAttribute('style', '...'): Mniej zalecane w porównaniu do element.style, ponieważ nadpisuje wszystkie style inline.

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

Tworzenie i wstawianie elementu <style>: Pozwala na dynamiczne dodawanie nowych reguł CSS na stronie.

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

Zmiana arkuszy stylów (document.styleSheets): Bezpośrednia interakcja z obiektami Style Sheet. Uważane za bardziej skomplikowane i mniej powszechne w codziennym rozwoju.

Wybór metody zależy od zadania: element.style jest wygodne dla drobnych, punktowych zmian; klasy są lepsze do zarządzania stanami i złożonymi stylami; zmienne CSS są przydatne do motywów i ustawień globalnych.

Jak można dynamicznie zmieniać style elementu na stronie internetowej?