La propiedad textShadow de estilo en HTML DOM se usa para establecer los efectos de sombra para el texto. Podemos establecer más de un efecto de sombra usando esta propiedad. Esta propiedad también puede devolver los efectos de sombra de un texto.
Sintaxis:
- Devuelve la propiedad textShadow.
object.style.textShadow
- Solía establecer la propiedad textShadow.
object.style.textShadow = "none|h-shadow v-shadow blur color| initial|inherit"
Valores de propiedad:
- ninguno: esta propiedad hace que no se dibuje ninguna sombra. Este es un valor predeterminado.
- h-shadow: Sirve para posicionar la sombra horizontal y permite valores negativos. Este es un campo obligatorio
- v-shadow: Sirve para posicionar la sombra vertical y permite valores negativos. Este es un campo obligatorio.
- desenfoque: es opcional y especifica la distancia de desenfoque.
- color: es opcional y se utiliza para especificar el color de una sombra.
- initial: establece la propiedad textShadow en su valor predeterminado.
- heredar: esta propiedad se hereda de su elemento padre.
Valor devuelto:
- Devuelve una string que representa una lista separada por comas de los efectos de sombra de la propiedad textShadow de un elemento.
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>DOM Style textShadow Property </title>
<style>
</style>
</head>
<body>
<center>
<h1 style="color:green;width:40%;">
GeeksForGeeks
</h1>
<h2>DOM Style textShadow Property </h2>
<p id="gfg">
A Computer science portal for geeks
</p>
<button type="button" onclick="geeks()">
Change Style
</button>
<script>
function geeks() {
// Set textShadow in green color.
document.getElementById(
"gfg").style.textShadow =
"5px 5px 1px green";
}
</script>
</center>
</body>
</html>
Producción:
Ejemplo-2:
<!DOCTYPE html>
<html>
<head>
<title>DOM Style textShadow Property </title>
<style>
</style>
</head>
<body>
<center>
<h1 style="color:green;width:40%;">
GeeksForGeeks
</h1>
<h2>DOM Style textShadow Property </h2>
<p id="gfg">
A Computer science portal for geeks
</p>
<button type="button" onclick="geeks()">
Shadow effect
</button>
<script>
function geeks() {
// Set textShadow in magenta color.
document.getElementById(
"gfg").style.textShadow =
"-3px -5px 1px magenta";
}
</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 textShadow se enumeran a continuación:
- Google Chrome
- Internet Explorer 10.0
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por bestharadhakrishna y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA