La propiedad Style textDecorationLine en HTML DOM se usa para establecer la decoración de una línea. Podemos especificar cualquier número de decoraciones para una línea. Devuelve la decoración que se le da al texto.
Sintaxis:
- Devuelve la propiedad textDecorationLine.
object.style.textDecorationLine
- Se utiliza para establecer la propiedad textDecorationLine.
object.style.textDecorationLine = "none|underline|overline| line-through|initial|inherit"
Valores de propiedad:
- none: Esto se usa para especificar ninguna línea para la decoración del texto. Es un valor predeterminado.
- subrayado: se utiliza para especificar una línea debajo del texto.
- overline: se utiliza para especificar que la línea se muestre sobre el texto.
- line-through: Esto se usa para especificar que la línea se muestra a través del texto.
- initial: establece la propiedad textDecorationLine en su valor predeterminado.
- heredar: esta propiedad se hereda de su elemento padre.
Valor devuelto: Devuelve una string que representa la propiedad de línea de decoración de texto para un elemento.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<title>DOM Style textDecorationLine Property </title>
<style>
#gfg {
text-decoration: underline;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM StylestextDecorationLine Property </h2>
<p id="gfg"> A Computer science portal for geeks</p>
<button type="button" onclick="geeks()">
Change Decoration
</button>
<script>
function geeks() {
// Set overline.
document.getElementById("gfg"
).style.textDecorationLine = "overline";
}
</script>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo-2:
HTML
<!DOCTYPE html>
<html>
<head>
<title>DOM Style textDecorationLine Property </title>
<style>
#gfg {
text-decoration: underline;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM StylestextDecorationLine Property </h2>
<p id="gfg"> A Computer science portal for geeks</p>
<button type="button" onclick="geeks()">
Change Decoration
</button>
<script>
function geeks() {
// Set overline-through.
document.getElementById("gfg"
).style.textDecorationLine =
"overline line-through";
}
</script>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Navegadores compatibles: los navegadores compatibles con la propiedad DOM Style textDecorationLine se enumeran a continuación:
- Google Chrome 57.0
- Firefox 36
- Ópera 44.0
- Apple Safari 7.0
Publicación traducida automáticamente
Artículo escrito por bestharadhakrishna y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA