Tekst jest najważniejszym i najbardziej widocznym atutem każdej aplikacji czy strony internetowej, bez jego użycia twórca nie jest w stanie w pełni przekazać swoich myśli ani właściwie przekazać informacji. Ze względu na potrzebę i znaczenie jego styl staje się koszmarem dla większości programistów. W przypadku tekstu statycznego właściwości CSS i jego struktura są bardzo pomocne, ale nadal istnieje zapotrzebowanie na właściwość, którą można zastosować do dynamicznego stylu. Na szczęście tę właściwość zapewnia JavaScript o nazwie „ tekstDekoracja ”.
W tym blogu opisano procedurę stosowania stylów do elementu HTML za pomocą właściwości textDecoration.
Jak zastosować style za pomocą właściwości textDecoration stylu HTML DOM?
Styl DOM” tekstDekoracja ”w zasadzie wykonuje stylizację, taką jak dodanie „ podkreślenie”, „nadkreślenie”, „przekreślenie linii” i „miganie”. ” nad wybranym elementem. Ta właściwość, gdy jest ustawiona na „ nic ” usuwa domyślną stylizację, która jest stosowana do tego elementu, jak znacznik zakotwiczenia.
Składnia
Składnia właściwości textDecoration w stylu DOM jest następująca:
eleObj. styl . tekstDekoracja = 'brak|nadkreślenie|mrugnięcie|podkreślenie|początek|przekreślenie linii|dziedziczenie'
Odwiedź poniższą tabelę, aby szybko zorientować się, jakie wartości można przypisać do „ tekstDekoracja ' nieruchomość:
| Wartość | Wyjaśnienie |
|---|---|
| nic | Konwertuj tekst na zwykły format, usuwając wszystkie wstępnie zdefiniowane stylizacje; jest to ustawienie domyślne. |
| przekreślić | Wstawia linię nad lub na zaznaczonym tekście. |
| migać | Sprawia, że tekst miga, ale nie jest obsługiwany przez wszystkie przeglądarki internetowe. |
| podkreślać | Umieszcza linię pod lub na dole zaznaczonego tekstu. |
| wstępny | Ustaw zastosowaną właściwość na jej wartość domyślną, która w naszym przypadku wynosi none. |
| linia przez | Umieść linię na środku tekstu, tj. pomiędzy tekstem. |
| odziedziczasz | Dziedziczy właściwość zastosowaną do elementu głównego lub nadrzędnego. |
Przyjrzyjmy się teraz procesowi implementacji i jego wpływowi na tekst dla każdej wartości „ tekstDekoracja ' nieruchomość.
Przykład 1: Właściwość „textDecoration = none”.
Praktyczna realizacja „ tekstDekoracja „nieruchomość o wartości” nic ” zostanie wyjaśnione w poniższym kodzie:
< ciało >
< Centrum >
< h1 styl = 'kolor: błękit kadetowy;' > Linuksa < / h1 >
< przycisk na kliknięcie = „Aplikator()” > Aplikator < / przycisk >
< P > Gdy wartość właściwości textDecoration jest ustawiona na none: < / P >
< h3 ID = 'przypadek użycia' styl = 'dekoracja tekstu: nadkreślenie;' > Element docelowy < / h3 >
< / Centrum >
< scenariusz >
funkcja Applier() {
document.getElementById('useCase').style.textDecoration = 'brak';
}
< / scenariusz >
< / ciało >
Wyjaśnienie powyższego kodu:
- Najpierw użyj „< przycisk >”, aby utworzyć przycisk i przypisać mu detektor zdarzeń „ na kliknięcie ”. Ten detektor zdarzeń uruchamia funkcję JavaScript o nazwie „ Aplikator ”.
- Następnie utwórz element docelowy „ h3 ” i przypisz mu unikalny identyfikator „ przypadek użycia ”. Zastosuj także CSS „ dekoracja tekstowa „właściwość do niego o wartości „ przekreślić „za pomocą” styl ' atrybut.
- Teraz wpisz „ Aplikator ()” treść funkcji i wybierz docelowy element poprzez jego identyfikator „ przypadek użycia ” i dołącz styl „ tekstDekoracja ' nieruchomość.
- Następnie przypisz właściwości wartość „ nic ”, aby usunąć wcześniej nałożoną stylizację tekstu-dekoracji na elemencie.
Wygląd strony po wykonaniu powyższego kodu:
Dane wyjściowe pokazują, że wstępna stylizacja zastosowana do docelowego elementu zostaje usunięta poprzez przypisanie mu wartości „ nic ”.
Przykład 2: Właściwość „textDecoration = inicjał”.
Poniższy fragment kodu ilustruje implementację „ tekstDekoracja ” właściwość, gdy wartość „ wstępny ” jest do niego przypisane:
< scenariusz >funkcjonować Aplikator ( ) {
dokument. pobierzElementById ( 'przypadek użycia' ) . styl . tekstDekoracja = 'wstępny' ;
}
scenariusz >
Wynik wygenerowany po kompilacji powyższego kodu pokazano poniżej:
Powyższe dane wyjściowe pokazują, że wartość dekoracji tekstu jest ustawiona na wartość domyślną, czyli „ nic ” i dlatego przywrócono wszystkie wstępne stylizacje.
Przykład 3: Właściwość „textDecoration = overline”.
Poniższy kod przedstawia praktyczną implementację „ tekstDekoracja ” właściwość, gdy wartość „ przekreślić ” jest mu zapewnione:
< ciało >< Centrum >
< h1 styl = 'kolor: błękit kadetowy;' > Linuksa < / h1 >
< przycisk na kliknięcie = „Aplikator()” > Aplikator < / przycisk >
< P > Gdy wartość właściwości textDecoration jest ustawiona na overline: < / P >
< h3 ID = 'przypadek użycia' > Element docelowy < / h3 >
< / Centrum >
< scenariusz >
funkcja Applier() {
document.getElementById('useCase').style.textDecoration = 'nadkreślenie';
}
< / scenariusz >
< / ciało >
Wyjaśnienie powyższego kodu znajduje się poniżej:
- Po pierwsze ' przycisk” i „h3 ” tworzony jest w ten sam sposób, a właściwość CSS, która jest stosowana nad elementem „h3” element został teraz usunięty.
- Następnie wewnątrz „ Aplikator ” wybierany jest docelowy element, a „ tekstDekoracja „nieruchomość o wartości” przekreślić ” jest przypisany do elementu.
Wynik po wykonaniu powyższego kodu jest wyświetlany poniżej:
Dane wyjściowe pokazują wpływ „ tekstDekoracja = nakreślenie ”właściwość nad tekstem.
Przykład 4: Właściwość „textDecoration = podkreślenie”.
Praktyczna realizacja tekstu, gdy wartość „ podkreślać ” przypisany jest do „ tekstDekoracja ” nieruchomość jest podana poniżej:
< scenariusz >funkcjonować Aplikator ( ) {
dokument. pobierzElementById ( 'przypadek użycia' ) . styl . tekstDekoracja = 'podkreślać' ;
}
scenariusz >
Po kompilacji wynik wygląda następująco:
Dane wyjściowe pokazują, że linia została dodana na dole tekstu.
Przykład 5: Właściwość „textDecoration = line-through”.
Wizualna realizacja „ tekstDekoracja ”nieruchomość posiadająca wartość „ linia przez ” pokazano poniżej:
< scenariusz >funkcjonować Aplikator ( ) {
dokument. pobierzElementById ( 'przypadek użycia' ) . styl . tekstDekoracja = 'linia przez' ;
}
scenariusz >
Dane wyjściowe wygenerowane dla powyższego kodu są wyświetlane poniżej:
Dane wyjściowe pokazują efekt uzyskany przez „ linia przez ” nad tekstem elementu docelowego.
Wniosek
Styl HTML DOM „ tekstDekoracja ” dotyczy w szczególności stylizacji elementów HTML za pomocą JavaScript w celu wykonywania dynamicznej stylizacji elementów tekstowych. Do tego „ można przypisać wiele wartości tekstDekoracja ” do wykonywania różnych wariantów stylizacji. Te wartości to „ brak”, „nadkreślenie”, „podkreślenie”, „przekreślenie linii”, „początkowe”, „miganie” i „dziedziczenie” ”. W tym blogu pomyślnie wyjaśniono proces, dzięki któremu programista może zastosować style za pomocą właściwości textDecoration.