Текст је најважнији и највидљивији адут за сваку апликацију или веб страницу, без употребе текста креатор не може у потпуности пренети своје мисли нити правилно доставити информације. Због своје потребе и важности, његов стил такође постаје ноћна мора за већину програмера. За статички текст, ЦСС својства и његов оквир много помажу, али ипак постоји потреба за својством које се може динамички применити на стил. Срећом, ово својство обезбеђује ЈаваСцрипт који има име „ тектДецоратион ”.
Овај блог ће обезбедити процедуру за примену стилова преко ХТМЛ елемента преко својства тектДецоратион.
Како применити стилове користећи својство ХТМЛ ДОМ стила тектДецоратион?
ДОМ стил “ тектДецоратион ” својство у основи врши стилизовање попут додавања „ подвучено“, „прецртано“, „преко линије“ и „трептање ” преко изабраног елемента. Ово својство када је подешено на „ ниједан ” уклања подразумевани стил који се примењује на тај елемент попут ознаке сидра.
Синтакса
Синтакса за својство тектДецоратион ДОМ стила је:
елеОбј. стил . тектДецоратион = 'ништа
Посетите доњу табелу да бисте добили брзу идеју о вредностима које се могу доделити „ тектДецоратион ' имовина:
| Валуе | Објашњење |
|---|---|
| ниједан | Претворите текст у обичан формат уклањајући све унапред дефинисане стилове; то је подразумевано. |
| оверлине | Умеће линију преко или на врх изабраног текста. |
| трепнути | Чини да текст трепери, али га не подржавају сви веб прегледачи. |
| подвући | Поставља линију испод или на дно изабраног текста. |
| почетни | Поставите примењено својство на његову подразумевану вредност која у нашем случају није ништа. |
| лине-тхроугх | Поставите линију у центар текста, односно између текста. |
| ти наследиш | Наслеђује својство примењено на основни или родитељски елемент. |
Сада, хајде да погледамо процес имплементације и његов утицај на текст за сваку вредност „ тектДецоратион ' имовина.
Пример 1: Својство „тектДецоратион = ноне“.
Практична примена „ тектДецоратион “ имовина која има вредност “ ниједан ” ће бити објашњено у коду испод:
< тело >
< центар >
< х1 стил = 'боја: кадетско плава;' > Линук < / х1 >
< дугме онцлицк = „Апплиер()“ > Апплиер < / дугме >
< стр > Када је вредност својства тектДецоратион подешена на ништа: < / стр >
< х3 ид = 'усеЦасе' стил = 'текст-декорација: прецртавање;' > Циљани елемент < / х3 >
< / центар >
< скрипта >
фунцтион Апплиер() {
доцумент.гетЕлементБиИд('усеЦасе').стиле.тектДецоратион = 'нема';
}
< / скрипта >
< / тело >
Објашњење горе наведеног кода:
- Прво, користите „< дугме >“ да бисте креирали дугме и доделили му слушаоца догађаја „ онцлицк ”. Овај слушалац догађаја покреће ЈаваСцрипт функцију под називом „ Апплиер ”.
- Затим креирајте циљани елемент „ х3 ” и доделите му јединствени ИД од „ усеЦасе ”. Такође, примените ЦСС “ текст-декорација ” својство које има вредност “ оверлине ” уз помоћ „ стил ” атрибут.
- Сада унесите „ Апплиер ()” тело функције и изаберите циљани елемент преко његовог ИД-а “ усеЦасе “ и приложите стил “ тектДецоратион ' имовина.
- Након тога, доделите својству вредност „ ниједан ” да бисте уклонили било који унапред примењени стил декорације текста преко елемента.
Приказ веб странице након извршења горњег кода:
Излаз показује да се претходни стил који је примењен на циљани елемент уклања тако што му се додељује вредност „ ниједан ”.
Пример 2: Својство „тектДецоратион = инитиал”.
Исечак кода у наставку илуструје примену „ тектДецоратион ” својство када је вредност “ почетни ” му је додељено:
< скрипта >функција Апплиер ( ) {
документ. гетЕлементБиИд ( 'усеЦасе' ) . стил . тектДецоратион = 'почетно' ;
}
скрипта >
Излаз генерисан након компилације горњег кода је приказан у наставку:
Горњи излаз показује да је вредност декорације текста постављена на подразумевану вредност која је „ ниједан ” и стога је сав претходни стил враћен.
Пример 3: Својство „тектДецоратион = оверлине“.
Код у наставку показује практичну примену „ тектДецоратион ” својство када је вредност “ оверлине ” му се пружа:
< тело >< центар >
< х1 стил = 'боја: кадетско плава;' > Линук < / х1 >
< дугме онцлицк = „Апплиер()“ > Апплиер < / дугме >
< стр > Када је вредност својства тектДецоратион подешена на оверлине: < / стр >
< х3 ид = 'усеЦасе' > Циљани елемент < / х3 >
< / центар >
< скрипта >
фунцтион Апплиер() {
доцумент.гетЕлементБиИд('усеЦасе').стиле.тектДецоратион = 'оверлине';
}
< / скрипта >
< / тело >
Објашњење горњег кода је наведено у наставку:
- Прво, „ дугме“ и „х3 ” елемент се креира на исти начин и ЦСС својство које се примењује на “х3” елемент је сада уклоњен.
- Затим, унутар „ Апплиер ” циљани елемент је изабран и „ тектДецоратион “ имовина која има вредност “ оверлине ” се додељује елементу.
Излаз након извршења горњег кода је приказан у наставку:
Излаз показује ефекат „ тектДецоратион = оверлине ” својство над текстом.
Пример 4: Својство “тектДецоратион = ундерлине”.
Практична примена текста када је вредност „ подвући ” је додељено „ тектДецоратион ” имовина је наведена у наставку:
< скрипта >функција Апплиер ( ) {
документ. гетЕлементБиИд ( 'усеЦасе' ) . стил . тектДецоратион = 'подвући' ;
}
скрипта >
Након компилације, излаз изгледа овако:
Излаз показује да је линија додата на дну текста.
Пример 5: Својство „тектДецоратион = лине-тхроугх“.
Визуелна имплементација „ тектДецоратион “ имовина која има вредност “ лине-тхроугх “ је приказан испод:
< скрипта >функција Апплиер ( ) {
документ. гетЕлементБиИд ( 'усеЦасе' ) . стил . тектДецоратион = 'пролаз кроз линију' ;
}
скрипта >
Излаз генерисан за горњи код је приказан у наставку:
Излаз показује ефекат који постиже „ лине-тхроугх ” преко текста циљаног елемента.
Закључак
ХТМЛ ДОМ стил “ тектДецоратион ” својство се посебно бави стилизовањем ХТМЛ елемената преко ЈаваСцрипт-а за обављање динамичког стилизовања на елементима текста. Више вредности може да се додели овом „ тектДецоратион ” за извођење различитих варијација стајлинга. Ове вредности су „ нема“, „прецртано“, „подвучено“, „преко линије“, „почетно“, „трептање“ и „наследити ”. Овај блог је успешно објаснио процес којим програмер може применити стилове користећи својство тектДецоратион.