Il testo è la risorsa più importante e più visibile per ogni applicazione o pagina web, senza l'utilizzo del testo l'autore non può trasmettere pienamente i suoi pensieri o fornire informazioni correttamente. A causa della sua necessità e importanza, il suo stile diventa anche un incubo per la maggior parte degli sviluppatori. Per il testo statico, le proprietà CSS e il relativo framework aiutano molto, ma è comunque necessaria una proprietà che possa essere applicata allo stile in modo dinamico. Fortunatamente, questa proprietà è fornita da JavaScript con il nome “ testoDecorazione ”.
Questo blog fornirà la procedura per applicare gli stili sull'elemento HTML tramite la proprietà textDecoration.
Come applicare gli stili utilizzando la proprietà textDecoration dello stile DOM HTML?
Lo stile DOM” testoDecorazione La proprietà ' fondamentalmente esegue uno stile come l'aggiunta di ' sottolineato', 'sopralineato', 'riga passante' e 'lampeggia'. 'su un elemento selezionato. Questa proprietà se impostata su ' nessuno ' rimuove lo stile predefinito applicato su quell'elemento come un tag di ancoraggio.
Sintassi
La sintassi per la proprietà textDecoration in stile DOM è:
eleObj. stile . testoDecorazione = 'nessuno|overline|blink|underline|initial|line-through|eredita'
Visita la tabella seguente per avere una rapida idea dei valori che possono essere assegnati a ' testoDecorazione ' proprietà:
| Valore | Spiegazione |
|---|---|
| nessuno | Converti il testo nel formato normale rimuovendo tutti gli stili predefiniti; è l'impostazione predefinita. |
| sopralineato | Inserisce una riga sopra o sopra il testo selezionato. |
| battito di ciglia | Fa lampeggiare il testo ma non è supportato da tutti i browser web. |
| sottolineare | Posiziona la riga sotto o alla fine del testo selezionato. |
| iniziale | Imposta la proprietà applicata sul suo valore predefinito che nel nostro caso non è nessuno. |
| linea passante | Posiziona la linea al centro del testo, cioè tra il testo. |
| erediti | Eredita la proprietà applicata all'elemento radice o genitore. |
Ora, diamo un'occhiata al processo di implementazione e al suo effetto sul testo per ciascun valore di ' testoDecorazione ' proprietà.
Esempio 1: Proprietà “textDecoration = none”.
L’attuazione pratica del “ testoDecorazione “immobile del valore di” nessuno ' verrà spiegato nel codice seguente:
< corpo >
< centro >
< h1 stile = 'colore: blu cadetto;' > Linux < / h1 >
< pulsante al clic = 'Applicatore()' > Applicatore < / pulsante >
< P > Quando il valore della proprietà textDecoration è impostato su none: < / P >
< h3 id = 'caso d'uso' stile = 'decorazione del testo: sopralineato;' > Elemento mirato < / h3 >
< / centro >
< sceneggiatura >
funzione Applicatore() {
document.getElementById('useCase').style.textDecoration = 'none';
}
< / sceneggiatura >
< / corpo >
Spiegazione del codice sopra indicato:
- Innanzitutto, utilizza un '< pulsante >' tag per creare un pulsante e assegnargli un ascoltatore di eventi di ' al clic ”. Questo ascoltatore di eventi attiva una funzione JavaScript denominata ' Applicatore ”.
- Successivamente, crea un elemento mirato “ h3 ' e assegnargli un ID univoco di ' caso d'uso ”. Inoltre, applica il CSS “ decorazione del testo 'proprietà ad esso avente un valore di' sopralineato ' con l'aiuto del ' stile attributo.
- Ora inserisci ' Applicatore ()” corpo della funzione e seleziona l'elemento di destinazione tramite il suo id “ caso d'uso ' e allega lo stile ' testoDecorazione ' proprietà.
- Successivamente, assegna alla proprietà un valore di ' nessuno ' per rimuovere eventuali stili di decorazione del testo preapplicati sull'elemento.
La visualizzazione della pagina web dopo l'esecuzione del codice sopra:
L'output mostra che il pre-styling applicato all'elemento di destinazione viene rimosso assegnandogli un valore di ' nessuno ”.
Esempio 2: Proprietà “textDecoration = partial”.
Il frammento di codice seguente illustra l'implementazione del ' testoDecorazione ' proprietà quando il valore di ' iniziale ” gli viene assegnato:
< sceneggiatura >funzione Applicatore ( ) {
documento. getElementById ( 'caso d'uso' ) . stile . testoDecorazione = 'iniziale' ;
}
sceneggiatura >
L'output generato dopo la compilazione del codice sopra è mostrato di seguito:
L'output precedente mostra che il valore della decorazione del testo è impostato sul valore predefinito che è ' nessuno ' e quindi tutto il pre-styling è stato annullato.
Esempio 3: Proprietà “textDecoration = overline”.
Il codice seguente mostra l'implementazione pratica del ' testoDecorazione ' proprietà quando il valore di ' sopralineato ” gli viene fornito:
< corpo >< centro >
< h1 stile = 'colore: blu cadetto;' > Linux < / h1 >
< pulsante al clic = 'Applicatore()' > Applicatore < / pulsante >
< P > Quando il valore della proprietà textDecoration è impostato su overline: < / P >
< h3 id = 'caso d'uso' > Elemento mirato < / h3 >
< / centro >
< sceneggiatura >
funzione Applicatore() {
document.getElementById('useCase').style.textDecoration = 'overline';
}
< / sceneggiatura >
< / corpo >
La spiegazione del codice di cui sopra è riportata di seguito:
- Prima il ' pulsante” e “h3 ” viene creato nello stesso modo e la proprietà CSS applicata al file “h3” l'elemento è ora rimosso.
- Successivamente, all'interno del “ Applicatore ' viene selezionato l'elemento di destinazione e il ' testoDecorazione “immobile del valore di” sopralineato ' viene assegnato all'elemento.
L'output dopo l'esecuzione del codice precedente viene visualizzato di seguito:
L'output mostra l'effetto del ' textDecoration = sopralineato 'proprietà sul testo.
Esempio 4: Proprietà “textDecoration = underline”.
L’attuazione pratica del testo quando il valore di “ sottolineare ' è assegnato al ' testoDecorazione 'la proprietà è indicata di seguito:
< sceneggiatura >funzione Applicatore ( ) {
documento. getElementById ( 'caso d'uso' ) . stile . testoDecorazione = 'sottolineare' ;
}
sceneggiatura >
Dopo la compilazione, l'output sarà simile al seguente:
L'output mostra che la riga viene aggiunta alla fine del testo.
Esempio 5: Proprietà “textDecoration = line-through”.
Implementazione visiva del “ testoDecorazione “immobile avente il valore di” linea passante ' è mostrato di seguito:
< sceneggiatura >funzione Applicatore ( ) {
documento. getElementById ( 'caso d'uso' ) . stile . testoDecorazione = 'linea passante' ;
}
sceneggiatura >
L'output generato per il codice precedente è visualizzato di seguito:
L'output mostra l'effetto prodotto dal ' linea passante 'sul testo dell'elemento di destinazione.
Conclusione
Lo stile DOM HTML “ testoDecorazione ' si occupa specificamente dello stile degli elementi HTML tramite JavaScript per eseguire uno stile dinamico sugli elementi di testo. È possibile assegnare più valori a questo “ testoDecorazione ” per eseguire diverse variazioni di styling. Questi valori sono “ none', 'overline', 'underline', 'line-through', 'initial', 'blink' e 'inherit' ”. Questo blog ha spiegato con successo il processo mediante il quale lo sviluppatore può applicare gli stili utilizzando la proprietà textDecoration.