Imposta lo stile di un elemento del modulo HTML in JavaScript

Nithin Krishnan 12 ottobre 2023

JavaScript

Aggiungi stile a un elemento HTML in JavaScript
Applicare lo stile agli elementi con il nome della classe in JavaScript
Applicare lo stile ai tag in JavaScript

Uno dei casi d’uso per l’impostazione di uno stile personalizzato su un elemento HTML in fase di esecuzione è durante l’esecuzione di convalide nei moduli. Dovremo evidenziare l’elemento in rosso e visualizzare un testo di convalida come Username field cannot be left empty. Esistono vari modi per impostare i parametri di stile su un elemento HTML in fase di esecuzione con JavaScript. Possiamo aggiungere nuovi stili e modificare anche lo stile esistente. Di seguito sono riportati alcuni modi in cui possiamo impostare lo stile CSS su un elemento HTML utilizzando JavaScript.

Aggiungi stile a un elemento HTML in JavaScript

Possiamo cambiare lo stile di un elemento con l’attributo JavaScript .style. Prima di ciò, dobbiamo interrogare l’elemento HTML e impostare l’attributo .style. Esistono vari modi per interrogare un elemento HTML in JavaScript, che sono i seguenti, ma il più comunemente usato è il metodo document.getElementById().

getElementById(): dell’interfaccia del documento in JavaScript viene utilizzato per interrogare un elemento HTML in base al suo id. Di solito, durante la progettazione di una pagina Web, gli sviluppatori assegnano un ID univoco agli elementi HTML. Il getElementById() restituisce l’elemento che ha l’id come specificato nei parametri della funzione getElementById(). Se sono presenti più elementi con lo stesso ID, viene restituito il primo elemento con l’ID specificato.
getElementsByClassName(): un altro modo per interrogare un elemento HTML è con il nome della classe assegnato. Questi sono nomi di classi CSS solitamente usati per decorare l’elemento. Poiché più di un elemento HTML può avere gli stessi nomi di classe CSS, la funzione restituisce un array di elementi HTML. Possiamo scegliere di modificare o aggiungere lo stile specifico a un elemento o a tutti gli elementi restituiti dalla funzione getElementsByClassName().
getElementsByName(): simile al modo in cui selezioniamo un elemento HTML con il suo nome di classe CSS, la funzione getElementsByName() utilizza l’attributo name per filtrare l’elemento HTML previsto. In questo caso, potrebbe esserci più di un elemento HTML con gli stessi nomi. Quindi, restituisce un array di elementi HTML con l’attributo name uguale a quello passato nei suoi parametri.
getElementsByTagName(): viene utilizzato nei casi in cui abbiamo bisogno di selezionare particolari tag HTML come i tag <div>, <p>, <li> ecc. Rende conveniente applicare uno stile o un set di stili a tutti gli elementi <div> in una volta sola. La funzione getElementsByTagName() restituisce un array di elementi il cui nome tag è passato nel parametro alla funzione. Potrebbero esserci più tag HTML i cui stili potrebbero dover essere modificati in una singola ripresa.
querySelector(): è come un metodo principale per recuperare un elemento. Per comprendere l’utilizzo dei parametri accettati da questa funzione JavaScript, pensare di utilizzare i selettori per eseguire query sugli elementi HTML nei CSS. Possiamo usare combinazioni di nomi di tag come document.querySelector("div span") (per selezionare tutto lo span all’interno dei div), document.querySelector("#elementID") (per interrogare un elemento in base al suo id ), document.querySelector(".sample-css") (per interrogare elementi che hanno il nome di classe CSS sample-css) ecc. Restituisce il primo elemento che soddisfa i criteri passati come parametro alla funzione.
querySelectorAll: è simile a querySelector() in tutti gli aspetti tranne il tipo restituito. Invece di restituire solo il primo elemento che soddisfa i criteri come nella funzione querySelector(), la funzione querySelectorAll() restituisce al metodo tutti gli elementi HTML che soddisfano le condizioni menzionate nei parametri. Una volta selezionato un elemento HTML, utilizziamo l’attributo .style, seguito dal nome dello stile che desideriamo modificare o aggiungere. Ad esempio, nel codice seguente, proviamo a cambiare il colore di sfondo di un elemento che ha id come username.

<div id="username">
    <label>User Name: </label>
    <input type="text" id="username" name="UserName">
</div>

window.onload = function() {
  document.getElementById('username').style.backgroundColor = 'green';
}

Se l’elemento HTML selezionato ha l’attributo style (ad esempio, il colore di sfondo) già impostato, il codice seguente lo cambierà. E se non ha alcun attributo di stile, un nuovo stile viene aggiunto in fase di esecuzione dal codice JavaScript.

Applicare lo stile agli elementi con il nome della classe in JavaScript

Possiamo interrogare un elemento usando il nome della classe con la funzione JavaScript getElementsByClassName(). Una volta selezionati gli elementi, possiamo aggiungere o modificare lo stile degli elementi con l’attributo .style. Questo metodo viene applicato quando abbiamo bisogno di avere attributi CSS aggiuntivi in quella particolare classe CSS dell’elemento. Il codice seguente descrive l’utilizzo.

<div id="username" class="blue-bg">
    <label>User Name: </label>
    <input type="text" id="username" name="UserName">
</div>

window.onload = function() {
  document.getElementsByClassName('blue-bg')[0].style.backgroundColor = 'green';
}

Nota: qui, la funzione getElementsByClassName("blue-bg") restituisce un array di elementi. Occorre quindi selezionare l’indice dell’elemento su cui intendiamo applicare gli stili. Se l’attributo style è già impostato da qualche classe CSS o da uno stile in linea, l’attributo .style lo sovrascriverà. Se non è già impostato, aggiungerà un nuovo attributo per impostare lo stile dell’elemento HTML di destinazione.

Applicare lo stile ai tag in JavaScript

Nel caso, dobbiamo aggiungere stile a tutti i div oa tutti gli span, quindi possiamo utilizzare la funzione .getElementsByTagName(). Richiede al DOM i nomi dei tag. Restituisce una raccolta di elementi HTML che soddisfano il nome del tag passato come parametro. Una volta che la funzione ha restituito gli elementi HTML, possiamo applicare l’attributo style a quell’elemento utilizzando il suo indice. Il codice seguente lo elabora.

<div id="output">Hello World!!</div>
<form name="LoginForm">
    <div id="username" class="blue-bg">
        <label>User Name: </label>
        <input type="text" id="username" name="UserName">
    </div>
    <div>
        <label>Password: </label>
        <input type="password" name="password">
    </div>
    <div>
        <label>Description: </label>
        <textarea name="description"></textarea>
    </div>
    <div>
        <label>Occupation: </label>
        <select id="occupationSelect" autofocus>
            <option>Student</option>
            <option>Teacher</option>
            <option>Engineer</option>
        </select>
    </div>
</form>

window.onload = function() {
  document.getElementsByTagName('div')[0].style.backgroundColor = 'green';
}

Eseguendo il codice sopra, il primo div (<div id="output">Hello World!!</div>) ottiene il colore di sfondo impostato come verde. Nota che poiché stiamo prendendo di mira il primo div, usiamo l’indice come 0 (document.getElementsByTagName("div")[0]). Allo stesso modo, possiamo assegnare attributi di stile anche al tag body con document.getElementsByTagName("body")[0].style.backgroundColor = "green". Poiché in un documento HTML è consentito un solo tag body, possiamo interrogare direttamente l’elemento body e applicarvi attributi di stile con l’attributo .body dell’interfaccia document. Quindi il codice sarà simile a document.body.style.backgroundColor = "green".