Pubblicato il

html

css

javascript


Come modificare o cambiare proprietà regola CSS con codice e funzione javascript

Ciao a tutti e benvenuti in questa piccola guida ove vi mostrerò come modificare una proprietà CSS di un elemento HTML tramite un codice Javascript. Questo può essere utile per esempio quando si vuole cambiare l'aspetto di un elemento HTML quando si clicca su un tasto. In questo esempio andremo a vedere come modificare il colore di un testo HTML quando viene premuto un tasto.

Come modificare regola CSS con codice JavaScript

Come prima cosa andiamo a posizionare i nostri elementi (tag) HTML. Per questo esempio abbiamo bisogno di un elemento <p>  e un <button>. In basso vi viene mostrato il codice HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Esempio CSS e Javascript</title>
</head>
<body>
    <p id="testP">Cambiami!</p>
    <button>Cliccami!</button>
</body>
</html>

 Se visualizziamo il codice mostrato in alto in un browser vedremo il seguente contenuto in output (senza regole CSS):

Cambiami!


Come potete vedere, se provate a cliccare sul tasto in alto, non succede nulla.
Ora vediamo il codice Javascript necessario per cambiare automaticamente la proprietà color (CSS) del tag

quando viene cliccato il bottone.

In generale la regole per modificare una proprietà CSS tramite codice JavaScript è la seguente:

document.getElementById("id_elemento").style.proprietà = "nuovo valore";

Come vedete prima di tutto dobbiamo selezionare dal DOM l'elemento a cui vogliamo cambiare la proprietà CSS. Selezioniamo questo elemento tramite il suo ID. In seguito modifichiamo la proprietà style di questo elemento ed assegniamo un nuovo valore. 

In basso vi viene mostrato il codice Javascript necessario per modificare una regola CSS di un tag HTML. 

<!DOCTYPE html>
<html>
<head>
    <title>Esempio CSS e Javascript</title>
</head>
<body>
    <p id="testP">Cambiami!</p>
    <button onclick="funzioneTest()">Cliccami!</button>
</body>
<script>
    function funzioneTest(){
       document.getElementById("testP").style.color = "#fff"; 
    } </script> </html>

Di nuovo, se facciamo un render del codice HTML mostrato in alto in un browser vedremo in output il seguente contenuto:

Cambiami!


Questa volta se proviamo a cliccare il bottone mostrato in alto vedrete che il colore della scritta cambia da verde a bianco.
Ci siamo! Abbiamo visto come cambiare una proprietà CSS tramite una funzione JavaScript.

Se hai una domanda puoi chiedere qualsiasi cosa nei commenti in basso

Grazie per aver letto questa guida su Devnews.it

Spero ti sia stata utile in qualche modo. Ti prego di supportare questa pagina mettendo mi piace alle nostre pagine social cliccando un basso, dove pubblichiamo regolermente notizie, tutorial e fatti curiosi sull'informatica. Grazie e ci vediamo alla prossima :)