Computer >> Computer tutorials >  >> Programming >> HTML

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 −

  • 1. Returning opacity

object.style.opacity
  • Modifying opacity

object.style.opacity = “value”

Example

Let us see an example of style opacity property −

<!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 −

HTML DOM Style opacity Property

Click on “Add opacity” button to add opacity property −

HTML DOM Style opacity Property