Esercizi Modificare Stile Javascript

Codegrind Team•Jul 22 2023

Ecco degli esercizi semplici con soluzione per praticare le basi della modifica dello stile CSS degli elementi in Javascript.

Esercizio 1

Cambiare il colore di sfondo di un elemento:

const elemento = document.getElementById("mioElemento");
elemento.style.backgroundColor = "red";

Esercizio 2

Cambiare il colore del testo di un elemento:

const elemento = document.getElementById("mioElemento");
elemento.style.color = "blue";

Esercizio 3

Cambiare la larghezza di un elemento:

const elemento = document.getElementById("mioElemento");
elemento.style.width = "200px";

Esercizio 4

Cambiare l'altezza di un elemento:

const elemento = document.getElementById("mioElemento");
elemento.style.height = "100px";

Esercizio 5

Cambiare il font-size di un elemento:

const elemento = document.getElementById("mioElemento");
elemento.style.fontSize = "20px";

Esercizio 6

Cambiare la visibilità di un elemento:

const elemento = document.getElementById("mioElemento");
elemento.style.visibility = "hidden";

Esercizio 7

Cambiare la posizione di un elemento:

const elemento = document.getElementById("mioElemento");
elemento.style.position = "absolute";
elemento.style.top = "50px";
elemento.style.left = "100px";

Esercizio 8

Cambiare il bordo di un elemento:

const elemento = document.getElementById("mioElemento");
elemento.style.border = "2px solid red";

Esercizio 9

Cambiare l'opacità di un elemento:

const elemento = document.getElementById("mioElemento");
elemento.style.opacity = "0.5";

Esercizio 10

Cambiare il margine interno (padding) di un elemento:

const elemento = document.getElementById("mioElemento");
elemento.style.padding = "10px";

Esercizio 11

Cambiare il colore di sfondo di tutti gli elementi con una determinata classe:

const elementi = document.getElementsByClassName("mioElemento");
for (let i = 0; i < elementi.length; i++) {
  elementi[i].style.backgroundColor = "yellow";
}

Esercizio 12

Cambiare il colore del testo di tutti gli elementi con una determinata classe:

const elementi = document.getElementsByClassName("mioElemento");
for (let i = 0; i < elementi.length; i++) {
  elementi[i].style.color = "green";
}

Esercizio 13

Cambiare la larghezza e l'altezza di tutti gli elementi con una determinata classe:

const elementi = document.getElementsByClassName("mioElemento");
for (let i = 0; i < elementi.length; i++) {
  elementi[i].style.width = "200px";
  elementi[i].style.height = "100px";
}

Esercizio 14

Cambiare il font-size e il colore del testo di tutti gli elementi di un tag specifico:

const elementi = document.getElementsByTagName("h1");
for (let i = 0; i < elementi.length; i++) {
  elementi[i].style.fontSize = "24px";
  elementi[i].style.color = "blue";
}

Esercizio 15

Cambiare il bordo e il margine interno di tutti gli elementi con una determinata classe:

const elementi = document.getElementsByClassName("mioElemento");
for (let i = 0; i < elementi.length; i++) {
  elementi[i].style.border = "2px solid red";
  elementi[i].style.padding = "10px";
}