How to Change Opacity of Div in JavaScript?

Fill In The Blank
Views 238

Answer:

JavaScript – Change the Opacity of Div

To change the opacity of a div using JavaScript, get reference to the div element, and assign required opacity value to the element.style.opacity property.

Opacity value ranges from 0 to 1. For example, 0.2, 0.3, 0.8, 0.45, etc., are some of the values that can be assigned to opacity property.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head> 
<body>
    <h2>Change Opacity of Div in JavaScript</h2>
    <div id="myDiv">
        <p>This is a paragraph in Div.</p>
        <span>This is a span in Div.</span>
    </div>
    <br>
    <button type="button" onclick="changeStyle()">Click Me</button>

    <script>
    function changeStyle(){
        var element = document.getElementById("myDiv");
        element.style.opacity = "0.2";
    }
    </script>

</body>
</html>

Related Articles:

This section is dedicated exclusively to Questions & Answers. For an in-depth exploration of JavaScript, click the links and dive deeper into this subject.

Go to Question List

Join Our telegram group to ask Questions

Click below button to join our groups.

Ask Question - CSE
Programming Language - PDF