La propiedad de opacidad de estilo en HTML DOM se usa para establecer el nivel de opacidad de un elemento. El nivel de opacidad define el nivel de transparencia donde el valor 1 representa no transparente, 0.5 representa 50% de transparencia y 0 representa completamente transparente. También devuelve el nivel de opacidad de un elemento.
Sintaxis:
- Devuelve la propiedad de opacidad.
object.style.opacity
- Se utiliza para establecer la propiedad de opacidad.
object.style.opacity = "number|initial|inherit"
Valores de propiedad:
- number: Especifica el valor de opacidad y va de 0.0 a 1.0.
- initial: Establece la propiedad de opacidad a su valor por defecto.
- heredar: esta propiedad se hereda de su elemento padre.
Valor devuelto: Devuelve una string que representa el nivel de opacidad de un elemento.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>DOM Style opacity Property </title>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM Style opacity Property </h2>
<div id="gfg"> A Computer science portal for geeks</div>
<button type="button" onclick="geeks()">
set Decoration
</button>
<script>
function geeks() {
document.getElementById("gfg").style.opacity
= "0.3";
}
</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 opacity Property </title>
<style>
#gfg {
width: 150px;
height: 40px;
background-color: green;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM Style opacity Property </h2>
<div id="gfg" style="color:white">
A Computer science portal for geeks</div>
<button type="button" onclick="geeks()">
change opacity
</button>
<script>
function geeks() {
document.getElementById("gfg").style.opacity
= "0";
}
</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 de opacidad del estilo DOM se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- safari de manzana
Publicación traducida automáticamente
Artículo escrito por bestharadhakrishna y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA