A szöveg minden alkalmazás vagy weboldal legfontosabb és leglátványosabb eszköze, szöveghasználat nélkül az alkotó nem tudja maradéktalanul közvetíteni gondolatait, vagy megfelelően átadni az információkat. Igényéből és fontosságából adódóan stílusa is rémálommá válik a legtöbb fejlesztő számára. A statikus szövegeknél a CSS tulajdonságok és keretrendszere sokat segítenek, de mégis szükség van egy olyan tulajdonságra, amely dinamikusan alkalmazható stílusra. Szerencsére ezt a tulajdonságot a JavaScript biztosítja, melynek neve ' szövegDekoráció ”.
Ez a blog bemutatja a stílusok alkalmazását a HTML elemre a textDecoration tulajdonságon keresztül.
Hogyan alkalmazzunk stílusokat a HTML DOM-stílusú textDecoration Property segítségével?
A DOM stílus szövegDekoráció ' tulajdonság alapvetően olyan stílust hajt végre, mint a ' hozzáadása aláhúzás, „áthúzás”, „áthúzás” és „villogás”. ” egy kiválasztott elem felett. Ez a tulajdonság '' egyik sem ” törli az alapértelmezett stílust, amely az elemre horgonycímkeként kerül alkalmazásra.
Szintaxis
A DOM stílusú textDecoration tulajdonság szintaxisa a következő:
eleObj. stílus . szövegDekoráció = 'nincs|áthúzás|villog|aláhúzott|kezdeti|áthúzás|öröklés'
Tekintse meg az alábbi táblázatot, hogy gyorsan megtudja, milyen értékeket lehet a „ szövegDekoráció ' ingatlan:
| Érték | Magyarázat |
|---|---|
| egyik sem | Szöveg konvertálása egyszerű formátumba az összes előre meghatározott stílus eltávolításával; ez az alapértelmezett. |
| overline | Beszúr egy sort a kijelölt szöveg fölé vagy fölé. |
| pislogás | Villogást okoz, de nem minden webböngésző támogatja. |
| aláhúzás | A sort a kijelölt szöveg alá vagy aljára helyezi. |
| a kezdeti | Állítsa be az alkalmazott tulajdonságot az alapértelmezett értékre, ami esetünkben egyik sem. |
| vonalvezetés | Helyezze a sort a szöveg közepére, azaz a szöveg közé. |
| örökölsz | Örökli a gyökér- vagy szülőelemre alkalmazott tulajdonságot. |
Most pedig nézzük át a megvalósítási folyamatot és annak a szövegre gyakorolt hatását a ' szövegDekoráció ' ingatlan.
1. példa: „textDecoration = none” Tulajdonság
A gyakorlati megvalósítás a „ szövegDekoráció '' értékű ingatlan egyik sem ” az alábbi kódban lesz elmagyarázva:
< test >
< központ >
< h1 stílus = 'szín: kadetkék;' > Linux < / h1 >
< gomb kattintásra = 'Alkalmazás()' > Applier < / gomb >
< p > Ha a textDecoration tulajdonság értéke none: < / p >
< h3 id = 'useCase' stílus = 'text-decoration: overline;' > Célzott elem < / h3 >
< / központ >
< forgatókönyv >
function Applier() {
document.getElementById('useCase').style.textDecoration = 'nincs';
}
< / forgatókönyv >
< / test >
A fent említett kód magyarázata:
- Először használjon „< gomb >” címkével hozzon létre egy gombot, és rendelje hozzá eseményfigyelőként a „ kattintásra ”. Ez az eseményfigyelő egy '' nevű JavaScript-függvényt indít el Applier ”.
- Ezután hozzon létre egy célzott elemet ' h3 ', és rendeljen hozzá egy egyedi azonosítót a ' useCase ”. Alkalmazza a CSS-t is szöveg-dekoráció '' értékű ingatlanhoz overline ' segítségével a ' stílus ' tulajdonság.
- Most írja be a „ Applier ()” függvény törzsét, és válassza ki a célzott elemet az azonosítójával useCase 'és csatolja a stílust' szövegDekoráció ' ingatlan.
- Ezt követően adjon hozzá egy értéket a tulajdonsághoz egyik sem ” elemre előre felvitt szövegdekorációs stílus eltávolításához.
A weboldal nézete a fenti kód végrehajtása után:
A kimenet azt mutatja, hogy a megcélzott elemre alkalmazott előzetes stílust a rendszer eltávolítja a „ egyik sem ”.
2. példa: „textDecoration = kezdeti” tulajdonság
Az alábbi kódrészlet a „ szövegDekoráció ' tulajdonság, ha a ' a kezdeti ” hozzá van rendelve:
< forgatókönyv >funkció Applier ( ) {
dokumentum. getElementById ( 'useCase' ) . stílus . szövegDekoráció = 'a kezdeti' ;
}
forgatókönyv >
A fenti kód összeállítása után generált kimenet az alábbiakban látható:
A fenti kimenet azt mutatja, hogy a szövegdekoráció értéke az alapértelmezett értékre van állítva, amely ' egyik sem ” és ezért minden előzetes stílust visszaállítottunk.
3. példa: „textDecoration = overline” tulajdonság
Az alábbi kód a „ szövegDekoráció ' tulajdonság, ha a ' overline ” biztosítva van hozzá:
< test >< központ >
< h1 stílus = 'szín: kadetkék;' > Linux < / h1 >
< gomb kattintásra = 'Alkalmazás()' > Applier < / gomb >
< p > Ha a textDecoration tulajdonság értéke overline-re van állítva: < / p >
< h3 id = 'useCase' > Célzott elem < / h3 >
< / központ >
< forgatókönyv >
function Applier() {
document.getElementById('useCase').style.textDecoration = 'overline';
}
< / forgatókönyv >
< / test >
A fenti kód magyarázata az alábbiakban található:
- Először is a „ gomb” és „h3 ” elem ugyanilyen módon jön létre, és a CSS tulajdonság, amely a 'h3' elem most eltávolítva.
- Ezután a „ Applier ” funkció a célzott elem kiválasztása, és a „ szövegDekoráció '' értékű ingatlan overline ” van hozzárendelve az elemhez.
A fenti kód végrehajtása utáni kimenet az alábbiakban jelenik meg:
A kimenet a „ textDecoration = overline ” tulajdonság a szöveg felett.
4. példa: „textDecoration = aláhúzás” Tulajdonság
A szöveg gyakorlati megvalósítása, amikor a „ aláhúzás ' hozzá van rendelve a ' szövegDekoráció ” tulajdonság az alábbiakban olvasható:
< forgatókönyv >funkció Applier ( ) {
dokumentum. getElementById ( 'useCase' ) . stílus . szövegDekoráció = 'aláhúzás' ;
}
forgatókönyv >
Az összeállítás után a kimenet így néz ki:
A kimenet azt mutatja, hogy a sor hozzáadva van a szöveg aljához.
5. példa: „textDecoration = vonalvezetés” tulajdonság
A „ szövegDekoráció '' értékű ingatlan vonalvezetés ” lent látható:
< forgatókönyv >funkció Applier ( ) {
dokumentum. getElementById ( 'useCase' ) . stílus . szövegDekoráció = 'átmenő' ;
}
forgatókönyv >
A fenti kódhoz generált kimenet az alábbiakban látható:
A kimenet a „ vonalvezetés ” a megcélzott elem szövege fölé.
Következtetés
A HTML DOM stílus ' szövegDekoráció ” tulajdonság kifejezetten a HTML-elemek stílusozásával foglalkozik JavaScripten keresztül, hogy dinamikus stílust hajtson végre a szöveges elemeken. Ehhez több érték is hozzárendelhető szövegDekoráció ” a stílus különböző variációinak végrehajtásához. Ezek az értékek ' nincs”, „áthúzás”, „aláhúzás”, „áthúzás”, „kezdeti”, „villog” és „örököl” ”. Ez a blog sikeresen ismertette azt a folyamatot, amellyel a fejlesztő stílusokat alkalmazhat a textDecoration tulajdonság használatával.