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.

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 −

 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 −

raja
AmitDiwan
Published on 22-Jul-2019 14:00:30
Previous Page Print Page
Next Page  
Advertisements