HTML DOM Style opacity Property
The DOM style opacity property returns and modify the value of opacity CSS property of an element in an HTML document.
Syntax
Following is the syntax −
object.style.opacity
object.style.opacity = “value”
Example
Let us see an example of style opacity property −
Live Demo
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
p {
background: #1f13db;
height: 50px;
width: 100%;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>DOM Style opacity Property Example</h1>
<p></p>
<button onclick="add()" class="btn">Add opacity</button>
<script>
function add() {
document.querySelector('p').style.opacity = "0.2";
}
</script>
</body>
</html>Output
This will produce the following output −
Click on “Add opacity” button to add opacity property −
Published on 22-Jul-2019 17:30:30
