Teksti on jokaisen sovelluksen tai verkkosivun tärkein ja näkyvin voimavara, ilman tekstin käyttöä luoja ei voi täysin välittää ajatuksiaan tai välittää tietoa oikein. Sen tarpeesta ja tärkeydestä johtuen sen tyylistä tulee myös painajainen useimmille kehittäjille. Staattisessa tekstissä CSS-ominaisuudet ja sen kehys auttavat paljon, mutta silti tarvitaan ominaisuutta, jota voidaan soveltaa tyyliin dynaamisesti. Onneksi tämän ominaisuuden tarjoaa JavaScript, jonka nimi on ' teksti Sisustus ”.
Tämä blogi tarjoaa menetelmän soveltaa tyylejä HTML-elementin päälle textDecoration-ominaisuuden kautta.
Kuinka käyttää tyylejä HTML DOM -tyylitekstin koristelu -ominaisuuden avulla?
DOM-tyyli' teksti Sisustus '-ominaisuus suorittaa periaatteessa tyylin, kuten lisääminen' alleviivaus, yliviivaus, läpiviivaus ja vilkkuminen ' valitun elementin päälle. Tämä ominaisuus on asetettu arvoon ' ei mitään ” poistaa oletustyylin, jota käytetään kyseisen elementin päälle ankkuritunnisteen tavoin.
Syntaksi
DOM-tyylin textDecoration-ominaisuuden syntaksi on:
eleObj. tyyli . teksti Sisustus = 'ei mitään|yliviiva|vilkkua|alleviivaus|alkuperäinen|rivi läpi|peri'
Käy alla olevassa taulukossa saadaksesi nopean käsityksen arvoista, jotka voidaan määrittää ' teksti Sisustus ”omaisuus:
| Arvo | Selitys |
|---|---|
| ei mitään | Muunna teksti tavalliseen muotoon poistamalla kaikki ennalta määritetyt tyylit; se on oletusarvo. |
| yliviivaus | Lisää rivin valitun tekstin päälle tai päälle. |
| räpäytys | Saa tekstin vilkkumaan, mutta kaikki verkkoselaimet eivät tue sitä. |
| korostaa | Se sijoittaa rivin valitun tekstin alle tai alaosaan. |
| alkukirjain | Aseta sovelletun ominaisuuden oletusarvo, jota meidän tapauksessamme ei ole. |
| linjan läpi | Aseta rivi tekstin keskelle eli tekstin väliin. |
| inherit | Perii juuri- tai yläelementtiin käytetyn ominaisuuden. |
Katsotaanpa nyt toteutusprosessia ja sen vaikutusta tekstiin jokaiselle ' teksti Sisustus ” omaisuutta.
Esimerkki 1: 'textDecoration = none' -ominaisuus
' teksti Sisustus 'omaisuus, jonka arvo on ' ei mitään ' selitetään alla olevassa koodissa:
< kehon >
< keskusta >
< h1 tyyli = 'väri: kadetinsininen;' > Linux < / h1 >
< -painiketta klikkaamalla = 'Appier()' > Applier < / -painiketta >
< s > Kun textDecoration-ominaisuuden arvoksi on asetettu ei mitään: < / s >
< h3 id = 'useCase' tyyli = 'text-decoration: overline;' > Kohdennettu elementti < / h3 >
< / keskusta >
< käsikirjoitus >
function Applier() {
document.getElementById('useCase').style.textDecoration = 'ei mitään';
}
< / käsikirjoitus >
< / kehon >
Selitys yllä mainitulle koodille:
- Käytä ensin '< -painiketta >' -tunnisteen avulla voit luoda painikkeen ja määrittää sen tapahtumakuuntelijaksi ' klikkaamalla ”. Tämä tapahtumaseuranta käynnistää JavaScript-funktion nimeltä ' Applier ”.
- Luo seuraavaksi kohdistettu elementti ' h3 ' ja anna sille yksilöllinen tunnus ' useCase ”. Käytä myös CSS-koodia ' teksti-sisustus 'omaisuus sille, jonka arvo on' yliviivaus '' -sovelluksen avulla tyyli ”-attribuutti.
- Kirjoita nyt ' Applier ()' -funktion runko ja valitse kohdeelementti sen tunnuksen kautta ' useCase ' ja liitä tyyli' teksti Sisustus ” omaisuutta.
- Tämän jälkeen määritä omaisuudelle arvo ' ei mitään ” poistaaksesi elementin päälle valmiiksi lisätyt tekstinkoristetyylit.
Verkkosivun näkymä yllä olevan koodin suorittamisen jälkeen:
Tulos näyttää, että kohdistettuun elementtiin käytetty esityyli poistetaan antamalla sille arvo ' ei mitään ”.
Esimerkki 2: 'textDecoration = iniciaali' -ominaisuus
Alla oleva koodinpätkä havainnollistaa ' teksti Sisustus ' omaisuutta, kun arvo ' alkukirjain ” on sille osoitettu:
< käsikirjoitus >toiminto Applier ( ) {
asiakirja. getElementById ( 'useCase' ) . tyyli . teksti Sisustus = 'alkukirjain' ;
}
käsikirjoitus >
Yllä olevan koodin kääntämisen jälkeen luotu tulos näkyy alla:
Yllä oleva tulos osoittaa, että tekstin koristelun arvo on asetettu oletusarvoonsa, joka on ' ei mitään ” ja siksi kaikki esimuotoilu on palautettu.
Esimerkki 3: 'textDecoration = overline' -ominaisuus
Alla oleva koodi näyttää ' teksti Sisustus ' omaisuutta, kun arvo ' yliviivaus ” on sille annettu:
< kehon >< keskusta >
< h1 tyyli = 'väri: kadetinsininen;' > Linux < / h1 >
< -painiketta klikkaamalla = 'Appier()' > Applier < / -painiketta >
< s > Kun textDecoration-ominaisuuden arvoksi on asetettu yliviiva: < / s >
< h3 id = 'useCase' > Kohdennettu elementti < / h3 >
< / keskusta >
< käsikirjoitus >
function Applier() {
document.getElementById('useCase').style.textDecoration = 'overline';
}
< / käsikirjoitus >
< / kehon >
Yllä olevan koodin selitys on alla:
- Ensinnäkin ' painike' ja 'h3 ”-elementti luodaan samalla tavalla ja CSS-ominaisuus, jota sovelletaan 'h3' elementti on nyt poistettu.
- Seuraavaksi ' Applier ' -toiminto kohdistettu elementti valitaan ja ' teksti Sisustus 'omaisuus, jonka arvo on ' yliviivaus ” on määritetty elementille.
Tulos yllä olevan koodin suorittamisen jälkeen näkyy alla:
Tulos näyttää ' textDecoration = yliviivaus ”-ominaisuutta tekstin päälle.
Esimerkki 4: 'textDecoration = alleviivaus' -ominaisuus
Tekstin käytännön toteutus, kun arvo ' korostaa ' on määritetty ' teksti Sisustus 'omaisuus on ilmoitettu alla:
< käsikirjoitus >toiminto Applier ( ) {
asiakirja. getElementById ( 'useCase' ) . tyyli . teksti Sisustus = 'korostaa' ;
}
käsikirjoitus >
Käännöksen jälkeen tulos näyttää tältä:
Tulos näyttää, että rivi on lisätty tekstin alaosaan.
Esimerkki 5: 'textDecoration = läpivienti' -ominaisuus
Visuaalinen toteutus ' teksti Sisustus 'omaisuus, jonka arvo on ' linjan läpi ' näkyy alla:
< käsikirjoitus >toiminto Applier ( ) {
asiakirja. getElementById ( 'useCase' ) . tyyli . teksti Sisustus = 'läpiviiva' ;
}
käsikirjoitus >
Yllä olevalle koodille luotu tulos näkyy alla:
Tulos näyttää tehosteen, jonka ' linjan läpi ' kohdistetun elementin tekstin päälle.
Johtopäätös
HTML DOM -tyyli ' teksti Sisustus ”-ominaisuus käsittelee erityisesti HTML-elementtien muotoilua JavaScriptin avulla tekstielementtien dynaamisen muotoilun suorittamiseksi. Tälle voidaan määrittää useita arvoja teksti Sisustus ” suorittaa erilaisia tyylin muunnelmia. Nämä arvot ovat ' ei mitään', 'yliviiva', 'alleviivaus', 'läpiviiva', 'alkuperäinen', 'vilkku' ja 'peri' ”. Tämä blogi on onnistuneesti selittänyt prosessin, jolla kehittäjä voi käyttää tyylejä textDecoration-ominaisuuden avulla.