Текст является наиболее важным и наиболее заметным ресурсом для каждого приложения или веб-страницы, без использования текста создатель не может полностью передать свои мысли или должным образом донести информацию. Из-за своей необходимости и важности его стиль также становится кошмаром для большинства разработчиков. Для статического текста свойства CSS и его структура очень помогают, но, тем не менее, существует потребность в свойстве, которое можно применять к стилю динамически. К счастью, это свойство предоставляется JavaScript с именем « текстУкрашение ».
В этом блоге будет представлена процедура применения стилей к элементу HTML с помощью свойства textDecoration.
Как применить стили с помощью свойства textDecoration стиля HTML DOM?
Стиль ДОМ» текстУкрашение Свойство ” в основном выполняет стилизацию, например, добавляет “ подчеркивание», «надчеркивание», «перечеркивание» и «мигание». » над выбранным элементом. Если для этого свойства установлено значение « никто » удаляет стиль по умолчанию, который применяется к этому элементу, как тег привязки.
Синтаксис
Синтаксис свойства textDecoration в стиле DOM:
eleObj. стиль . текстУкрашение '=' 'нет|перечеркивание|мигание|подчёркивание|начальный|сквозной|наследовать'
Посетите таблицу ниже, чтобы получить краткое представление о значениях, которые можно присвоить параметру « текстУкрашение ' свойство:
| Ценить | Объяснение |
|---|---|
| никто | Преобразуйте текст в простой формат, удалив все предопределенные стили; это значение по умолчанию. |
| зачеркнуть | Вставляет линию поверх выделенного текста или поверх него. |
| моргать | Заставляет текст мигать, но поддерживается не всеми веб-браузерами. |
| подчеркнуть | Он помещает линию под или внизу выделенного текста. |
| исходный | Установите для примененного свойства значение по умолчанию, которое в нашем случае равно нулю. |
| Линия, проходящая через | Поместите линию в центре текста, то есть между текстом. |
| ты наследуешь | Наследует свойство, примененное к корневому или родительскому элементу. |
Теперь давайте посмотрим на процесс реализации и его влияние на текст для каждого значения параметра « текстУкрашение ' свойство.
Пример 1: Свойство «textDecoration = none»
Практическая реализация « текстУкрашение «имущество, стоимость которого составляет» никто будет объяснено в коде ниже:
< тело >
< центр >
< ч1 стиль '=' 'цвет: кадетский синий;' > Линукс < / ч1 >
< кнопка по щелчку '=' «Применитель()» > Аппликатор < / кнопка >
< п > Если для свойства textDecoration установлено значение none: < / п >
< h3 идентификатор '=' 'Случай использования' стиль '=' 'текстовое оформление: надчеркивание'; > Целевой элемент < / h3 >
< / центр >
< сценарий >
функция Applier() {
document.getElementById('useCase').style.textDecoration = 'none';
}
< / сценарий >
< / тело >
Пояснение приведенного выше кода:
- Во-первых, используйте «< кнопка >», чтобы создать кнопку и назначить ей прослушиватель событий « по щелчку ». Этот прослушиватель событий запускает функцию JavaScript с именем « Аппликатор ».
- Далее создайте целевой элемент « h3 » и присвойте ему уникальный идентификатор « вариант использования ». Также примените CSS « текст-оформление » имущество, имеющее стоимость « зачеркнуть » с помощью « стиль » атрибут.
- Теперь введите « Аппликатор ()» и выберите целевой элемент по его идентификатору « вариант использования » и прикрепите стиль « текстУкрашение ' свойство.
- После этого присвойте свойству значение « никто », чтобы удалить любые предварительно примененные стили оформления текста к элементу.
Вид веб-страницы после выполнения приведенного выше кода:
Вывод показывает, что предварительный стиль, примененный к целевому элементу, удаляется путем присвоения ему значения « никто ».
Пример 2: Свойство «textDecoration = Initial».
Приведенный ниже фрагмент кода иллюстрирует реализацию « текстУкрашение ” собственности, когда значение “ исходный ему присвоено:
< сценарий >функция Аппликатор ( ) {
документ. getElementById ( 'Случай использования' ) . стиль . текстУкрашение '=' 'исходный' ;
}
сценарий >
Вывод, сгенерированный после компиляции приведенного выше кода, показан ниже:
Приведенный выше вывод показывает, что для оформления текста установлено значение по умолчанию: « никто и, следовательно, все предварительные стили были отменены.
Пример 3: Свойство «textDecoration = overline».
В приведенном ниже коде показана практическая реализация « текстУкрашение ” собственности, когда значение “ зачеркнуть ему предоставляется:
< тело >< центр >
< ч1 стиль '=' 'цвет: кадетский синий;' > Линукс < / ч1 >
< кнопка по щелчку '=' «Применитель()» > Аппликатор < / кнопка >
< п > Когда значение свойства textDecoration установлено на перечеркивание: < / п >
< h3 идентификатор '=' 'Случай использования' > Целевой элемент < / h3 >
< / центр >
< сценарий >
функция Applier() {
document.getElementById('useCase').style.textDecoration = 'overline';
}
< / сценарий >
< / тело >
Объяснение приведенного выше кода приведено ниже:
- Во-первых, « кнопка» и «h3 элемент создается таким же образом, и свойство CSS, которое применяется к элементу «h3» элемент теперь удален.
- Далее внутри « Аппликатор ” целевой элемент выбран и “ текстУкрашение «имущество, стоимость которого составляет» зачеркнуть » присваивается элементу.
Результат выполнения приведенного выше кода показан ниже:
Вывод показывает эффект « textDecoration = надчеркивание » свойство над текстом.
Пример 4: Свойство «textDecoration = подчеркивание»
Практическая реализация текста при значении « подчеркнуть » присвоено « текстУкрашение » свойство указано ниже:
< сценарий >функция Аппликатор ( ) {
документ. getElementById ( 'Случай использования' ) . стиль . текстУкрашение '=' 'подчеркнуть' ;
}
сценарий >
После компиляции вывод выглядит следующим образом:
Вывод показывает, что строка добавлена внизу текста.
Пример 5: Свойство «textDecoration = сквозное»
Визуальная реализация « текстУкрашение «имущество, стоимость которого составляет» Линия, проходящая через » показано ниже:
< сценарий >функция Аппликатор ( ) {
документ. getElementById ( 'Случай использования' ) . стиль . текстУкрашение '=' 'Линия, проходящая через' ;
}
сценарий >
Вывод, сгенерированный для приведенного выше кода, показан ниже:
Вывод показывает эффект, достигнутый « Линия, проходящая через » над текстом целевого элемента.
Заключение
Стиль HTML DOM» текстУкрашение Свойство ” специально предназначено для стилизации HTML-элементов с помощью JavaScript для выполнения динамического стиля текстовых элементов. Этому параметру можно присвоить несколько значений. текстУкрашение » для выполнения разных вариаций укладки. Эти ценности « нет», «надчеркивание», «подчеркивание», «сквозной», «начальный», «мигать» и «наследовать ». В этом блоге успешно объяснен процесс, с помощью которого разработчик может применять стили с помощью свойства textDecoration.