JavaScript con HTML/CSS
JavaScript e HTML/CSS
Introduzione all’interazione tra JavaScript, HTML e CSS per manipolare contenuti e stili dinamicamente.
Introduzione
JavaScript può modificare sia il contenuto HTML sia lo stile CSS di una pagina. Questo avviene tramite il DOM (Document Object Model), una rappresentazione ad albero della pagina. Attraverso il DOM possiamo accedere a elementi HTML, leggere o cambiare proprietà e aggiungere comportamenti dinamici.
- Selezionare elementi HTML.
- Modificare testo e attributi.
- Aggiungere o rimuovere classi CSS.
- Applicare stili dinamici.
Modificare contenuto HTML
Possiamo cambiare il testo o l’HTML interno di un elemento con innerText o innerHTML.
Codice Esempio: modifica del testo
Modificare attributi HTML
Possiamo cambiare attributi come src, href, value con setAttribute.
Codice Esempio: modifica attributo immagine
Modificare stili CSS
Ogni elemento ha una proprietà style che permette di impostare valori CSS.
Codice Esempio: cambio di colore
Aggiungere o rimuovere classi CSS
È possibile gestire le classi CSS con classList.add, classList.remove e classList.toggle.
Codice Esempio: gestione classi
<!-- HTML & JavaScript di riferimento --><div id="box" class="scatola"></div><script>// Aggiunta di una classe
document.getElementById("box").classList.add("evidenziato");// Rimozione
document.getElementById("box").classList.remove("scatola");// Alternanza (aggiunge se non c'è, rimuove se già presente)
document.getElementById("box").classList.toggle("attivo");</script>
Tabella riassuntiva
| Metodo/Proprietà | Funzione | Esempio |
|---|---|---|
| getElementById | Seleziona un elemento per id | document.getElementById("id") |
| getElementsByClassName | Restituisce lista di elementi con una classe | document.getElementsByClassName("classe") |
| getElementsByTagName | Restituisce lista di elementi con un tag | document.getElementsByTagName("p") |
| querySelector | Seleziona il primo elemento che corrisponde al selettore | document.querySelector(".classe") |
| querySelectorAll | Seleziona tutti gli elementi che corrispondono al selettore | document.querySelectorAll("div") |
| innerText | Modifica o legge il testo interno | el.innerText = "Ciao" |
| innerHTML | Modifica o legge HTML interno | el.innerHTML = "<b>Ciao</b>" |
| setAttribute | Imposta un attributo | el.setAttribute("src","img.png") |
| getAttribute | Legge un attributo | el.getAttribute("id") |
| removeAttribute | Rimuove un attributo | el.removeAttribute("disabled") |
| style | Imposta stili inline | el.style.color = "red" |
| classList.add | Aggiunge una classe | el.classList.add("attivo") |
| classList.remove | Rimuove una classe | el.classList.remove("attivo") |
| classList.toggle | Alterna la presenza di una classe | el.classList.toggle("attivo") |
| appendChild | Aggiunge un nodo figlio | el.appendChild(nuovoElemento) |
| removeChild | Rimuove un nodo figlio | el.removeChild(vecchioElemento) |
| createElement | Crea un nuovo nodo | document.createElement("p") |
| textContent | Modifica o legge solo il testo | el.textContent = "Hello" |
Considerazioni
JavaScript interagisce con HTML e CSS attraverso il DOM. Con esso possiamo modificare dinamicamente contenuti e stili, rendendo le pagine interattive e adattabili all’utente.
IP: 216.73.216.214
