La propiedad Style textDecorationStyle en HTML DOM se usa para establecer la línea. Puede mostrar la línea en varios estilos, como una sola línea , una línea doble , ondulada , etc. Al usar esta propiedad, podemos mostrar la línea en un estilo específico.
Sintaxis:
- Devuelve la propiedad textDecorationStyle.
object.style.textDecorationStyle
- Se utiliza para establecer la propiedad textDecorationStyle.
object.style.textDecorationStyle = "solid|double|dotted|dashed| wavy|initial|inherit"
Valores de propiedad:
- sólido: esta propiedad solía mostrar la línea como una sola línea. Este es un valor predeterminado.
- doble: esta propiedad solía mostrar la línea como una línea doble.
- dotted: esta propiedad solía mostrar la línea como una línea punteada.
- dashed: Esta propiedad solía mostrar la línea como una línea discontinua.
- ondulado: esta propiedad solía mostrar la línea como una línea ondulada.
- initial: establece la propiedad textDecorationStyle en su valor predeterminado.
- heredar: esta propiedad se hereda de su elemento padre.
Valor devuelto:
- Devuelve una string que representa una propiedad textDecorationStyle de un elemento.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>DOM Style textDecorationStyle Property </title>
<style>
#gfg {
text-decoration: underline;
</style>
</head>
<body>
<center>
<h1 style="color:green;width:40%;">
GeeksForGeeks
</h1>
<h2>DOM Style textDecorationStyle Property </h2>
<p id="gfg">
A Computer science portal for geeks
</p>
<button type="button" onclick="geeks()">
Change Style
</button>
<script>
function geeks() {
// Set textDecorationStyle Property
document.getElementById(
"gfg").style.textDecorationStyle =
"double";
}
</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 textDecorationStyle Property </title>
<style>
#gfg {
text-decoration: underline;
</style>
</head>
<body>
<center>
<h1 style="color:green;width:40%;">
GeeksForGeeks
</h1>
<h2>DOM Style textDecorationStyle Property </h2>
<p id="gfg">
A Computer science portal for geeks
</p>
<button type="button" onclick="geeks()">
Change Style
</button>
<script>
function geeks() {
// Set textDecorationStyle Property
document.getElementById(
"gfg").style.textDecorationStyle =
"wavy";
}
</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 textDecorationStyle se enumeran a continuación:
- Google Chrome 57.0 y superior
- Edge 79.0 y superior
- Firefox 36.0 y superior
- Ópera 44.0 y superior
- Safari 12.1 y superior
- Internet Explorer no es compatible
Publicación traducida automáticamente
Artículo escrito por bestharadhakrishna y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA