Ang teksto ay ang pinakamahalaga at pinaka-nakikitang asset para sa bawat application o webpage, nang walang paggamit ng text, hindi maaaring ganap na maihatid ng tagalikha ang kanyang mga iniisip o makapaghatid ng impormasyon nang maayos. Dahil sa pangangailangan at kahalagahan nito, nagiging bangungot din ang pag-istilo nito para sa karamihan ng mga developer. Para sa static na text, ang mga katangian ng CSS at ang framework nito ay nakakatulong nang malaki ngunit gayunpaman, may pangangailangan para sa isang property na maaaring ilapat sa istilo nang pabago-bago. Sa kabutihang palad, ang property na ito ay ibinigay ng JavaScript na may pangalang ' textDekorasyon ”.
Ang blog na ito ay magbibigay ng pamamaraan para maglapat ng mga istilo sa HTML na elemento sa pamamagitan ng textDecoration property.
Paano Mag-apply ng Mga Estilo Gamit ang HTML DOM Style textDecoration Property?
Ang istilo ng DOM ' textDekorasyon Ang ” property ay karaniwang gumaganap ng pag-istilo tulad ng pagdaragdag ng “ salungguhitan', 'overline', 'line-through', at 'blink ” sa isang napiling elemento. Ang property na ito kapag nakatakda sa ' wala ” inaalis ang default na istilo na inilapat sa elementong iyon tulad ng isang anchor tag.
Syntax
Ang syntax para sa DOM style textDecoration property ay:
eleObj. istilo . textDekorasyon = 'wala|overline|blink|underline|initial|line-through|inherit'
Bisitahin ang talahanayan sa ibaba upang makakuha ng mabilis na ideya tungkol sa mga halaga na maaaring italaga sa ' textDekorasyon ” ari-arian:
| Halaga | Paliwanag |
|---|---|
| wala | I-convert ang text sa plain na format na inaalis ang lahat ng paunang natukoy na estilo; ito ang default. |
| overline | Naglalagay ng linya sa ibabaw o sa ibabaw ng napiling text. |
| kumurap | Ginagawang kumukurap ang teksto ngunit hindi ito sinusuportahan ng lahat ng web browser. |
| salungguhit | Inilalagay nito ang linya sa ilalim o sa ibaba ng napiling teksto. |
| inisyal | Itakda ang inilapat na property sa default na halaga nito na wala sa aming kaso. |
| line-through | Ilagay ang linya sa gitna ng teksto i.e. sa pagitan ng teksto. |
| magmana ka | Inherits ang property na inilapat sa root o parent na elemento. |
Ngayon, tingnan natin ang proseso ng pagpapatupad at ang epekto nito sa teksto para sa bawat halaga ng ' textDekorasyon ” ari-arian.
Halimbawa 1: 'textDecoration = none' Property
Ang praktikal na pagpapatupad ng ' textDekorasyon ' ari-arian na may halaga ng ' wala ” ay ipapaliwanag sa ibaba ng code:
< katawan >
< gitna >
< h1 istilo = 'kulay: cadetblue;' > Linux < / h1 >
< pindutan onclick = 'Applier()' > Applier < / pindutan >
< p > Kapag ang halaga ng textDecoration property ay nakatakda sa wala: < / p >
< h3 id = 'useCase' istilo = 'text-decoration: overline;' > Naka-target na Elemento < / h3 >
< / gitna >
< script >
function Applier() {
document.getElementById('useCase').style.textDecoration = 'wala';
}
< / script >
< / katawan >
Paliwanag ng nabanggit na code:
- Una, gumamit ng '< pindutan >” tag para gumawa ng button at magtalaga dito ng event listener ng “ onclick ”. Ang tagapakinig ng kaganapang ito ay nagti-trigger ng isang function ng JavaScript na pinangalanang ' Applier ”.
- Susunod, lumikha ng isang naka-target na elemento ' h3 ” at italaga ito ng natatanging id ng “ useCase ”. Gayundin, ilapat ang CSS ' text-dekorasyon ” ari-arian dito na may halaga ng “ overline 'sa tulong ng' istilo ” katangian.
- Ngayon, ipasok ang ' Applier ()' function body at piliin ang naka-target na elemento sa pamamagitan ng id nito ' useCase 'at ikabit ang istilo' textDekorasyon ” ari-arian.
- Pagkatapos nito, italaga ang ari-arian ng isang halaga ng ' wala ” upang alisin ang anumang paunang inilapat na istilo ng dekorasyong teksto sa elemento.
Ang view ng webpage pagkatapos ng pagpapatupad ng code sa itaas:
Ipinapakita ng output na ang paunang pag-istilo na inilapat sa naka-target na elemento ay naaalis sa pamamagitan ng pagtatalaga dito ng isang halaga ng ' wala ”.
Halimbawa 2: 'textDecoration = initial' Property
Ang snippet ng code sa ibaba ay naglalarawan ng pagpapatupad ng ' textDekorasyon ” ari-arian kapag ang halaga ng “ inisyal ” ay nakatalaga dito:
< script >function Applier ( ) {
dokumento. getElementById ( 'useCase' ) . istilo . textDekorasyon = 'paunang' ;
}
script >
Ang output na nabuo pagkatapos ng compilation ng code sa itaas ay ipinapakita sa ibaba:
Ang output sa itaas ay nagpapakita na ang halaga ng dekorasyon ng teksto ay nakatakda sa default na halaga nito na ' wala ” at samakatuwid ang lahat ng pre-styling ay ibinalik.
Halimbawa 3: 'textDecoration = overline' Property
Ang code sa ibaba ay nagpapakita ng praktikal na pagpapatupad ng ' textDekorasyon ” ari-arian kapag ang halaga ng “ overline ” ay ibinigay dito:
< katawan >< gitna >
< h1 istilo = 'kulay: cadetblue;' > Linux < / h1 >
< pindutan onclick = 'Applier()' > Applier < / pindutan >
< p > Kapag ang halaga ng textDecoration property ay nakatakda sa overline: < / p >
< h3 id = 'useCase' > Naka-target na Elemento < / h3 >
< / gitna >
< script >
function Applier() {
document.getElementById('useCase').style.textDecoration = 'overline';
}
< / iskrip >
< / katawan >
Ang paliwanag ng code sa itaas ay nakasaad sa ibaba:
- Una, ang ' pindutan' at 'h3 ” na elemento ay nilikha sa parehong paraan at ang CSS property na inilapat sa ibabaw ng “h3” ang elemento ay tinanggal na ngayon.
- Susunod, sa loob ng ' Applier function na ang naka-target na elemento ay pinili at ang ' textDekorasyon ' ari-arian na may halaga ng ' overline ” ay itinalaga sa elemento.
Ang output pagkatapos ng pagpapatupad ng code sa itaas ay ipinapakita sa ibaba:
Ang output ay nagpapakita ng epekto ng ' textDecoration = overline ” pag-aari sa ibabaw ng teksto.
Halimbawa 4: 'textDecoration = underline' Property
Ang praktikal na pagpapatupad ng teksto kapag ang halaga ng ' salungguhit ' ay itinalaga sa ' textDekorasyon ” ang ari-arian ay nakasaad sa ibaba:
< iskrip >function Applier ( ) {
dokumento. getElementById ( 'useCase' ) . istilo . textDekorasyon = 'salungguhit' ;
}
iskrip >
Pagkatapos ng compilation, ang output ay ganito:
Ipinapakita ng output na idinagdag ang linya sa ibaba ng teksto.
Halimbawa 5: 'textDecoration = line-through' Property
Visual na pagpapatupad ng ' textDekorasyon ' ari-arian na may halaga ng ' line-through ” ay ipinapakita sa ibaba:
< iskrip >function Applier ( ) {
dokumento. getElementById ( 'useCase' ) . istilo . textDekorasyon = 'line-through' ;
}
iskrip >
Ang output na nabuo para sa code sa itaas ay ipinapakita sa ibaba:
Ang output ay nagpapakita ng epekto na ginawa ng ' line-through ” sa ibabaw ng naka-target na elemento ng teksto.
Konklusyon
Ang istilong HTML DOM ' textDekorasyon Ang ” property ay partikular na tumatalakay sa pag-istilo ng mga elemento ng HTML sa pamamagitan ng JavaScript upang maisagawa ang dynamic na pag-istilo sa mga elemento ng teksto. Maaaring italaga ang maraming halaga sa ' textDekorasyon ” para magsagawa ng iba't ibang variation ng styling. Ang mga halagang ito ay ' wala”, “overline”, “underline”, “line-through”, “initial”, “blink”, at “inherit ”. Matagumpay na naipaliwanag ng blog na ito ang proseso kung saan maaaring maglapat ang developer ng mga istilo gamit ang textDecoration property.