Modificare i CSS

Pagina princiaple di Javascript

Ogni nodo del DOM che rappresenta un tag ha al suo interno un'oggetto style, manipolando questo oggetto è possibile modificare le proprietà di visualizzazione del tag.

Le modifiche applicate ad un elemento usando style, sarano aggiunte come propietà css inline.

<body>

    <h1>Oggetto style Javascript</h1>

    <div id="res">
        Qualcosa cambierà
    </div>

    <script>
        let res = document.getElementById('res');
        res.style.color = 'red';
        res.style.backgroundColor = '#fdd';
    </script>
</body>

Dopo l'esecuzione dello scirpt il codice HTML caricato sulla pagina cambierà, in questo caso cambierà solo div#res.

<div id="res" style="color: red; background-color: rgb(255, 221, 221);">
    Qualcosa cambierà
</div>

Come atteso le modifiche state aggiunte come propietà CSS inline.

Le modfiche effettuate con Javascript sono temporanee, quando ricarichiamo la pagina spariscono.

Nello scirp precedente abbiamo modificato la visualizzazione di una elemento della pagina assegnado dei valori alle sue proprietà.

Tutte le proprietà che possono essere utilizzate nelle regole CSS sono disponibili in style, i valori di queste proprietà sono quelli che useremmo nei CSS, eccone alcune:

• backgroundColor: Il colore di sfondo dell'elemento.
• color: Il colore del testo dell'elemento.
• fontSize: La dimensione del carattere del testo.
• fontWeight: Lo spessore del carattere del testo (ad esempio “bold”).
• border: La larghezza, il tipo e il colore del bordo dell'elemento.
• padding: Lo spazio interno tra il contenuto e il bordo dell'elemento.
• margin: Lo spazio esterno tra l'elemento e gli elementi circostanti.
• width e height: La larghezza e l'altezza dell'elemento.
• display: Il tipo di visualizzazione dell'elemento (ad esempio “block”, “inline”, “none”).

I valori che assegnamo a queste proprietà in Javascript sono stringhe quindi vanno racchiuse tra apici o virgolette.

Le proprieta CSS il cui nome è composto da una sola parola sono disponibili nell'oggetto style con lo stesso nome, quelle composte da due o più parole separate dal trattino (che in Javascript è la sottrazione) hanno il nome scritto in camel style. Ecco qualche esempio:

1. Scrivere uno script che cambia il colore di sfondo a tutti i paragrafi della pagina
2. Scrivere uno script che scrive in maiuscolo tutti i testi contenuti in span.maiuscolo
3. Scrivere uno script che assegna un margin-left:10px a tutti i tag con classe ml-10
4. Scrivere una funzione che prende in input una classe e un colore e assegna il colore passato a tutti gli elementi che hanno quella classe
5. Scrivere una funzione che prende in input un classe e fa sparire dallo schermo i tag con quella classe
6. Scrivere una funzione che prende in input un tag e due colori, al primo tag assegna il primo colore e a tutti gli altri assegna il secondo
7. Scrivere una funzione che prende in input un selettore CSS, un carattere tra p,m,b, e un numero. La funzione deve assegnare a a tutti gli oggetti corrispondenti al selettore un padding se passiamo p, un margine se passiamo m o un border se passiamo b, di dimensioni in pixel pari al numero passato