Modificare la proprietà CSS utilizzando JavaScript

1. Modificare la proprietà CSS con getElementsByClassName in JavaScript
2. Cambia proprietà CSS con getElementById in JavaScript
3. Cambia proprietà CSS con querySelector() in JavaScript
4. Conclusione

HyperText Markup Language (HTML) è statico e di solito stupido. Significa che non ha le capacità per eseguire parti di codice in base a condizioni dinamiche. Non ha disposizioni per i blocchi di condizioni if per mostrare o nascondere determinati elementi o tag HTML se una condizione è soddisfatta. Per tali scenari, potrebbe essere necessario fare affidamento su JavaScript o jQuery per modificare gli stili CSS di un elemento HTML.

Per cambiare lo stile di un elemento HTML, diciamo un <div>, dovremmo selezionare il <div> o quel particolare elemento HTML in modo univoco. Ora possiamo farlo con le seguenti funzioni dell’interfaccia del documento.

Modificare la proprietà CSS con getElementsByClassName in JavaScript

getElementsByClassName cerca nell’intero documento HTML e restituisce un array di tutti gli elementi HTML con il nome della classe passato nei parametri di questa funzione. Possiamo anche usarlo su un elemento per trovare i sottoelementi con il nome di classe CSS specificato. La sintassi per getElementByClassName è la seguente.

document.getElementsByClassName('green-class'));

Imposta lo stile utilizzando element.style

Una volta identificato l’elemento in modo univoco, possiamo usare i metodi .style o .className per cambiare i suoi stili CSS. Fare riferimento ai seguenti esempi.

<div class="col-md-12">
  <div class="p-3">
      <label>Input String:</label><br>
      <input type="text" class="input-blue-border" id="b1" value="120">
      <button class="ml-3" onclick="changeStyle()">Change Border</button>
  </div>
</div>

function changeStyle() {
  document.getElementsByClassName('input-blue-border')[0].style.borderColor =
      'red';
}

Nota che nel metodo changeStyle() interroghiamo l’elemento input con il metodo document.getElementsByClassName("input-blue-border"). Restituisce un array con gli elementi selezionati. Selezioniamo il primo elemento dell’array e ne cambiamo il bordo con .style.borderColor = "red".

Imposta lo stile utilizzando element.className

Si può usare element.className per cambiare vari parametri di stile di un elemento HTML clubbandoli come una classe e assegnando il nome della classe all’elemento selezionato con element.className. Questo metodo è utile, soprattutto negli scenari in cui è necessario visualizzare un errore in un campo di input. In tal caso, dobbiamo cambiare il colore del bordo del campo di input in rosso e il testo interno dell’input in rosso. Quindi possiamo raggruppare questi stili come una classe e assegnarli all’elemento usando l’attributo element.className. Il codice seguente illustra la gestione degli errori.

<div class="col-md-12">
  <div class="p-3">
      <label>Input String:</label><br>
      <input type="text" class="input-blue-border" id="b1" value="120">
      <button class="ml-3" onclick="changeClass()">Change Border</button>
  </div>
</div>

function changeClass() {
  document.getElementsByClassName('input-blue-border')[0].className =
      'input-error';
}

La classe input-error ha un paio di attributi che impostano il colore del bordo e il colore del carattere del campo di input sul rosso.

Osservazioni

• Il metodo getElementByClassName() restituisce un array di elementi che qualificano il valore del nome della classe passato come argomenti.
• getElementByClassName() può essere utilizzato durante l’applicazione delle modifiche di stile a più di un elemento iterando sull’array restituito da questo metodo.
• Una volta selezionato l’elemento, element.style. <Attributo di stile> imposta l’attributo di stile particolare sull’elemento selezionato.
• Allo stesso modo, element.className aiuta a impostare più di una modifica di stile per l’elemento HTML selezionato clubbando quegli attributi di stile come una classe CSS.

Cambia proprietà CSS con getElementById in JavaScript

Se abbiamo un ID univoco assegnato a un elemento HTML, possiamo interrogarlo e cambiarne lo stile con la funzione getElementById() dell’interfaccia Document. È il metodo più utilizzato dagli sviluppatori web. Per lo più gli id ​​assegnati a un div saranno mantenuti univoci in modo che durante l’esecuzione della funzione getElementById(), gli altri elementi HTML non vengano selezionati. La sintassi per getElementById() è quella illustrata di seguito.

document.getElementById("parent-1"));

Poiché selezioniamo un elemento unico, in questo caso, i cambiamenti di stile sono facili da fare. I seguenti codici descrivono i modi. È simile a quelli menzionati in precedenza, con una differenza nel modo in cui interroghiamo un elemento. Qui, identifichiamo in modo univoco i nodi HTML con l’id dell’elemento.

document.getElementById('b1').style.borderColor = 'red';
document.getElementById('b1').className = 'input-error';

Osservazioni

• A differenza di getElementByClassName(), il metodo getElementById() restituisce solo un oggetto che è l’elemento nodo selezionato dalla query.
• L’HTML desiderato deve avere un attributo id affinché il metodo getElementById() funzioni.
• Se più di un nodo HTML ha lo stesso id, il metodo getElementById() restituirà il primo elemento con l’id specificato.
• A differenza di getElementByClassName(), le modifiche di stile possono essere applicate direttamente sull’oggetto restituito dalla funzione getElementById() poiché restituisce un oggetto invece di un array.

Cambia proprietà CSS con querySelector() in JavaScript

Il metodo querySelector() è un superset di funzionalità offerte dai meccanismi di selezione degli elementi. Ha la potenza combinata dei metodi getElementsByClassName() e getElementById(). Con questo metodo, possiamo selezionare l’elemento HTML allo stesso modo durante la scrittura delle classi CSS. Può funzionare per selezionare un elemento per id, per classe e anche per tag HTML. Si comporta in modo simile al metodo getElementById() in termini di tipo restituito. querySelector() restituisce solo il primo elemento del nodo HTML che soddisfa i criteri menzionati nei parametri. La sintassi usata per querySelector() è la seguente:

document.querySelector('#<id of div>');
document.querySelector('.<css class name>');
document.querySelector('<HTML tag eg: div>');

Quindi, anche qui lo stile può essere applicato all’elemento HTML selezionato aggiungendo .style.borderColor o .className. Se usiamo la stessa struttura HTML e cambiamo il metodo onclick in changeStyle(), possiamo ottenere di portare il nuovo stile dinamicamente aggiungendo il codice come descritto di seguito in JavaScript:

<button class="ml-3" onclick="changeStyle()">Change Border</button>

function changeStyle() {
  document.querySelector('.input-blue-border').style.borderColor = 'red';
}

Allo stesso modo, se vogliamo cambiare la classe CSS dell’input, invece di un semplice cambio di stile, dobbiamo usare l’attributo .className() invece di .style.borderColor nell’esempio precedente.

<button class="ml-3" onclick="changeClass()">Change Border</button>

function changeClass() {
  document.querySelector('.input-blue-border').className = 'input-error';
}

Osservazioni

• Vale la pena tenere d’occhio il tipo di ritorno della funzione document.querySelector(). Invece di restituire tutti gli oggetti HTML che soddisfano la query, restituisce il primo elemento che soddisfa la condizione della query.
• Il bello dell’utilizzo di querySelector() è che possiamo usarlo in varie circostanze, potrebbe essere una query basata sull’id dell’elemento HTML o essere la sua classe CSS o anche con il nome del tag HTML.
• Cambiare dinamicamente gli stili di più di un div che soddisfano i criteri di query potrebbe non essere possibile con querySelector() poiché restituisce un oggetto invece di un array di elementi HTML che passano i termini della query.

Conclusione

Per cambiare lo stile di un elemento HTML in fase di esecuzione, possiamo usare gli attributi .style o .className dell’elemento HTML selezionato. Le sfide vengono affrontate durante la selezione del nodo HTML di destinazione. Esistono vari modi per selezionare i nodi HTML in modo univoco. Possiamo usare il metodo getElementsByClassName(), che usa il nome di una classe CSS per interrogare il nodo HTML. Oppure seleziona un elemento in modo univoco assegnandogli un id e interrogandolo con .getElementById() o utilizzando il metodo multiuso querySelector() che può adattarsi a tutte le circostanze, comprendendo la query in base ai parametri ad essa passati.