HTML DOM Style opacity Property

HTMLWeb DevelopmentFront End Technology

The DOM style opacity property returns and modify the value of opacity CSS property of an element in an HTML document.


Following is the syntax −

  • 1. Returning opacity
  • Modifying opacity = “value”


Let us see an example of style opacity property −

 Live Demo

<!DOCTYPE html>
   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;
<h1>DOM Style opacity Property Example</h1>
<button onclick="add()" class="btn">Add opacity</button>
   function add() {
      document.querySelector('p').style.opacity = "0.2";


This will produce the following output −

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

Published on 22-Jul-2019 17:30:30