Rimuovi tutti gli stili da un elemento usando JavaScript
Nel processo di aggiornamento di una pagina Web o del sito, può esserci un requisito per rimuovere tutto lo styling o una parte di esso da un particolare elemento. Inoltre, aggiungendo effetti e messaggi di avvertimento/errore al clic del mouse o al passaggio del mouse. In tali casi, la rimozione di tutti gli stili da un elemento che utilizza JavaScript si meraviglia di attirare l'attenzione dell'utente e far risaltare il sito Web.
Questo blog discuterà degli approcci per rimuovere tutti gli stili da un elemento in JavaScript.
Come rimuovere/omettere tutti gli stili da un elemento in JavaScript?
Per rimuovere tutti gli stili da un elemento in JavaScript, è possibile utilizzare i seguenti approcci:
- "removeattribute ()" metodo.
- "stile" proprietà.
- "jQuery"Metodi.
Seguiamo ciascuno degli approcci uno per uno!
Approccio 1: rimuovere tutti gli stili da un elemento in JavaScript usando il metodo RemoveAttribute ()
IL "removeattribute ()"Il metodo omette un attributo da un elemento. Questo metodo può essere applicato per omettere tutti gli stili inclusi da un elemento specifico.
Sintassi
elemento.removeattribute (nome)
Nella sintassi data:
- "nome"Si riferisce al nome dell'attributo.
Esempio
Panoramiamo il seguente esempio:
Questo è il sito web Linuxhint
Nel frammento di codice sopra:
- Includere l'intestazione dichiarata con il specificato "id" e il "stile"Attributo.
- Nella parte JavaScript del codice, accedi alla voce inclusa dalla sua "id" usando il "getElementById ()" metodo.
- Nel passaggio successivo, applica il "removeattribute ()"Metodo con l'attributo"stile"Come suo parametro.
- Ciò comporterà la rimozione dello stile specificato dall'intestazione.
Prima di rimuovere lo stile
Dopo aver rimosso lo stile
Da entrambi gli snippet di immagine sopra, si può osservare la differenza prima e dopo la rimozione dello stile.
Approccio 2: rimuovere gli stili specifici da un elemento in JavaScript usando la proprietà di stile
IL "stile"La proprietà dà il valore dell'attributo di stile di un elemento. Questa proprietà può essere implementata per rimuovere una particolare proprietà contenuta nell'attributo di stile.
Sintassi
elemento.stile.Proprietà = valore
Nella sintassi sopra:
- "valore"Corrisponde al valore che si riferisce alla proprietà specificata.
Esempio
Passiamo attraverso il seguente esempio:
JavaScript è un linguaggio di programmazione molto efficace. È molto utile nella progettazione di una pagina web o del sito. Può anche essere integrato con HTML per implementare anche alcune funzionalità aggiunte.
Eseguire i seguenti passaggi come indicato nelle righe di codice sopra:
- Includere un elemento di paragrafo che ha specificato "id" e il "stile"Attributo costituito dalle proprietà dichiarate.
- Inoltre, crea un pulsante con un allegato "al clic"Evento che invoca la funzione removeStyle ().
- Nel passaggio successivo, accedi al paragrafo contenuto utilizzando il suo "id" nel "getElementById ()" metodo.
- Infine, assegnare la proprietà "larghezza" COME "nullo".
- Ciò rimuoverà la proprietà di larghezza all'interno del "stile"Attributo del paragrafo sul clic del pulsante.
Produzione
Nell'output sopra, il "larghezza"Del paragrafo viene rimosso al clic del pulsante.
Approccio 3: rimuovere tutti gli stili da un elemento in JavaScript usando jQuery
L'approccio jQuery può essere applicato per recuperare direttamente l'elemento incluso e rimuovere il suo stile al clic del pulsante.
Esempio
L'esempio seguente spiega il concetto dichiarato.
Prima di rimuovere lo stile
Nelle righe di codice sopra:
- Includere l'intestazione dichiarata. Inoltre, aggiungi l'immagine specificata con "id"E le sue dimensioni impostate in"stile"Attributo.
- Dopodiché, crea un pulsante con il specificato "id".
- Nella parte jQuery del codice, accedi al pulsante creato. Al clic sul pulsante, la funzione dichiarata verrà attivata.
- Nella definizione della funzione, accedi all'immagine contenuta con "id"Direttamente.
- Inoltre, applica il "removeAtr ()"Metodo con l'attributo"stile"Come suo parametro.
- Ciò si tradurrà nel trascurare le dimensioni impostate dell'immagine, rimuovendo così lo stile dell'elemento sul clic del pulsante.
Produzione
Dall'output sopra, è evidente che le dimensioni impostate dell'immagine all'interno del "stile"L'attributo non influisce sul clic del pulsante.
Conclusione
IL "removeattribute ()Metodo ", il"stile"Proprietà o"jQuery"L'approccio può essere utilizzato per rimuovere tutti gli stili da un elemento usando JavaScript. Il metodo REMOVEATTRIBUTE () può essere applicato per rimuovere direttamente tutto lo styling dall'elemento accessibile. La proprietà di stile può essere implementata per rimuovere uno stile particolare all'interno del "stile"Attributo da un elemento. L'approccio jQuery può essere applicato per ottenere la stessa funzionalità. Questo tutorial spiega come rimuovere/omettere tutti gli stili da un elemento specifico in JavaScript.