Πώς μπορεί κανείς να αλλάξει δυναμικά τα στυλ ενός…

Μπορείτε να χρησιμοποιήσετε τις ακόλουθες προσεγγίσεις:

Την αλλαγή της ιδιότητας style του στοιχείου: Ο πιο απλός τρόπος, τροποποιεί άμεσα τα inline στυλ.
```
const element = document.getElementById('myElement');
element.style.color = 'red';
element.style.fontSize = '20px';
```

Προσθήκη/αφαίρεση CSS κλάσεων: Μια πιο ευέλικτη προσέγγιση, βασισμένη σε προκαθορισμένα στυλ στο CSS. Οι αλλαγές στα στυλ γίνονται με την εφαρμογή ή την αφαίρεση κλάσεων.

const element = document.getElementById('myElement');
element.classList.add('active'); // προσθέτει την κλάση 'active'
element.classList.remove('inactive'); // αφαιρεί την κλάση 'inactive'
element.classList.toggle('visible'); // εναλλάσσει την κλάση 'visible'

Στο CSS:

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

Αλλαγή μεταβλητών CSS (Προσαρμοσμένες ιδιότητες CSS): Επιτρέπει την αλλαγή των τιμών των μεταβλητών που χρησιμοποιούνται στο CSS, επηρεάζοντας τα στυλ πολλών στοιχείων ταυτόχρονα.
```
const root = document.documentElement;
root.style.setProperty('--main-color', 'blue');
```
Στο CSS:
```
:root {
    --main-color: #333;
}
.my-element {
    color: var(--main-color);
}
```
element.setAttribute('style', '...'): Λιγότερο συστηνόμενη σε σύγκριση με το element.style, καθώς αντικαθιστά όλα τα inline στυλ.
```
const element = document.getElementById('myElement');
element.setAttribute('style', 'color: green; border: 1px solid black;');
```
Δημιουργία και εισαγωγή στοιχείου <style>: Επιτρέπει την δυναμική προσθήκη νέων κανόνων CSS στη σελίδα.
```
const style = document.createElement('style');
style.innerHTML = '#myElement { background-color: lightblue; }';
document.head.appendChild(style);
```
Τροποποίηση φύλλων στυλ (document.styleSheets): Άμεση αλληλεπίδραση με αντικείμενα Style Sheet. Θεωρείται πιο πολύπλοκο και λιγότερο συνηθισμένο στην καθημερινή ανάπτυξη.

Η επιλογή της μεθόδου εξαρτάται από την εργασία: το element.style είναι βολικό για μικρές, σημειακές αλλαγές; οι κλάσεις προτιμώνται για τη διαχείριση καταστάσεων και σύνθετων στυλ; οι μεταβλητές CSS είναι καλές για θέματα και παγκόσσιες ρυθμίσεις.

Πώς μπορεί κανείς να αλλάξει δυναμικά τα στυλ ενός στοιχείου σε μια ιστοσελίδα;