El texto es el activo más importante y visible de cada aplicación o página web; sin el uso de texto, el creador no puede transmitir completamente sus pensamientos ni entregar información de manera adecuada. Debido a su necesidad e importancia, su estilo también se convierte en una pesadilla para la mayoría de los desarrolladores. Para el texto estático, las propiedades CSS y su marco ayudan mucho, pero aún así, se necesita una propiedad que se pueda aplicar al estilo dinámicamente. Afortunadamente, esta propiedad la proporciona JavaScript y tiene el nombre ' textoDecoración ”.
Este blog proporcionará el procedimiento para aplicar estilos sobre el elemento HTML a través de la propiedad textDecoration.
¿Cómo aplicar estilos utilizando la propiedad textDecoration del estilo HTML DOM?
El estilo DOM “ textoDecoración La propiedad 'básicamente realiza un estilo como agregar' subrayado”, “sobrerayado”, “renglón” y “parpadeante” ”sobre un elemento seleccionado. Esta propiedad cuando se establece en ' ninguno ”elimina el estilo predeterminado que se aplica sobre ese elemento como una etiqueta de anclaje.
Sintaxis
La sintaxis para la propiedad textDecoration de estilo DOM es:
eleObj. estilo . textoDecoración = 'ninguno|sobrelínea|parpadeo|subrayado|inicial|línea directa|heredar'
Visite la siguiente tabla para tener una idea rápida sobre los valores que se pueden asignar a ' textoDecoración ' propiedad:
| Valor | Explicación |
|---|---|
| ninguno | Convierta texto a formato plano eliminando todos los estilos predefinidos; es el valor predeterminado. |
| sobrelínea | Inserta una línea sobre o encima del texto seleccionado. |
| parpadear | Hace que el texto parpadee pero no es compatible con todos los navegadores web. |
| subrayar | Coloca la línea debajo o al final del texto seleccionado. |
| inicial | Establezca la propiedad aplicada en su valor predeterminado, que en nuestro caso es ninguno. |
| línea directa | Coloque la línea en el centro del texto, es decir, entre el texto. |
| tu heredas | Hereda la propiedad aplicada al elemento raíz o padre. |
Ahora, echemos un vistazo al proceso de implementación y su efecto en el texto para cada valor de ' textoDecoración ' propiedad.
Ejemplo 1: propiedad “textDecoration = none”
La implementación práctica del “ textoDecoración 'propiedad que tiene un valor de' ninguno ”se explicará en el siguiente código:
< cuerpo >
< centro >
< h1 estilo = 'color: azul cadete;' > linux < / h1 >
< botón al hacer clic = 'Aplicador()' > Aplicador < / botón >
< pag > Cuando el valor de la propiedad textDecoration se establece en ninguno: < / pag >
< h3 identificación = 'caso de uso' estilo = 'decoración de texto: sobrelínea;' > Elemento objetivo < / h3 >
< / centro >
< guion >
función aplicador() {
document.getElementById('useCase').style.textDecoration = 'ninguno';
}
< / guion >
< / cuerpo >
Explicación del código mencionado anteriormente:
- Primero, utilice un “< botón >” etiqueta para crear un botón y asignarle un detector de eventos de “ al hacer clic ”. Este detector de eventos activa una función de JavaScript llamada ' Aplicador ”.
- A continuación, cree un elemento específico ' h3 ' y asígnale una identificación única de ' caso de uso ”. Además, aplica el CSS “ decoracion-de-texto ' propiedad que tiene un valor de ' sobrelínea ' con la ayuda del ' estilo ' atributo.
- Ahora, ingresa el “ Aplicador ()” cuerpo de la función y seleccione el elemento objetivo a través de su id “ caso de uso ' y adjunte el estilo ' textoDecoración ' propiedad.
- Después de eso, asigne a la propiedad un valor de “ ninguno ”para eliminar cualquier estilo de decoración de texto aplicado previamente sobre el elemento.
La vista de la página web después de la ejecución del código anterior:
El resultado muestra que el estilo previo que se aplica al elemento de destino se elimina asignándole un valor de ' ninguno ”.
Ejemplo 2: propiedad “textDecoration = inicial”
El siguiente fragmento de código ilustra la implementación de ' textoDecoración ” propiedad cuando el valor de “ inicial ” se le asigna:
< guion >función Aplicador ( ) {
documento. obtenerElementoPorId ( 'caso de uso' ) . estilo . textoDecoración = 'inicial' ;
}
guion >
El resultado generado después de la compilación del código anterior se muestra a continuación:
El resultado anterior muestra que el valor de la decoración del texto está establecido en su valor predeterminado, que es ' ninguno ”Y por lo tanto se ha revertido todo el estilo previo.
Ejemplo 3: propiedad “textDecoration = overline”
El siguiente código muestra la implementación práctica de ' textoDecoración ” propiedad cuando el valor de “ sobrelínea ” se le proporciona:
< cuerpo >< centro >
< h1 estilo = 'color: azul cadete;' > linux < / h1 >
< botón al hacer clic = 'Aplicador()' > Aplicador < / botón >
< pag > Cuando el valor de la propiedad textDecoration se establece en sobrelínea: < / pag >
< h3 identificación = 'caso de uso' > Elemento objetivo < / h3 >
< / centro >
< guion >
función aplicador() {
document.getElementById('useCase').style.textDecoration = 'overline';
}
< / guion >
< / cuerpo >
La explicación del código anterior se indica a continuación:
- Primero el ' botón” y “h3 'El elemento se crea de la misma manera y la propiedad CSS que se aplica sobre el “h3” El elemento ahora está eliminado.
- A continuación, dentro del “ Aplicador ” función, se selecciona el elemento objetivo y el “ textoDecoración 'propiedad que tiene un valor de' sobrelínea ”se asigna al elemento.
El resultado después de la ejecución del código anterior se muestra a continuación:
El resultado muestra el efecto del “ textDecoration = sobrelínea ”Propiedad sobre el texto.
Ejemplo 4: propiedad “textDecoration = subrayado”
La implementación práctica del texto cuando el valor de “ subrayar ' se asigna a la ' textoDecoración La propiedad se indica a continuación:
< guion >función Aplicador ( ) {
documento. obtenerElementoPorId ( 'caso de uso' ) . estilo . textoDecoración = 'subrayar' ;
}
guion >
Después de la compilación, el resultado se ve así:
El resultado muestra que la línea se agrega en la parte inferior del texto.
Ejemplo 5: Propiedad “textDecoration = line-through”
Implementación visual del “ textoDecoración 'propiedad que tiene el valor de' línea directa ”se muestra a continuación:
< guion >función Aplicador ( ) {
documento. obtenerElementoPorId ( 'caso de uso' ) . estilo . textoDecoración = 'línea directa' ;
}
guion >
El resultado generado para el código anterior se muestra a continuación:
El resultado muestra el efecto realizado por el ' línea directa ”sobre el texto del elemento de destino.
Conclusión
El estilo HTML DOM “ textoDecoración La propiedad ”se ocupa específicamente del estilo de elementos HTML a través de JavaScript para realizar un estilo dinámico en elementos de texto. Se pueden asignar múltiples valores a este “ textoDecoración ”para realizar diferentes variaciones de peinado. Estos valores son “ ninguno”, “sobrelínea”, “subrayado”, “renglón”, “inicial”, “parpadeante” y “heredar” ”. Este blog ha explicado con éxito el proceso mediante el cual el desarrollador puede aplicar estilos utilizando la propiedad textDecoration.