Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set the opacity level for a division element using CSS?
The style.opacity property is used to set the opacity for the element’s, and it returns the string value. These property is used to set or return opacity of a different HTML elements. It is one of the HTML Style Opacity properties.
The onclick event occurs only when a user clicks the elements and it is a purely JavaScript attribute. Whenever you click on the onclick event it does some actions like displaying a message or redirects the user another page. The onclick event must be used very less in the website, because it may create the confuse to the users. So, use these event very wisely.
Syntax
The following is the syntax for the setting the opacity level using the JavaScript −
object.style.opacity = "number|initial|inherit"
Parameter
- number − Used to specify the opacity
Example
In this example, we are going to set the opacity level for a division element using CSS.
<html>
<head>
<style>
#content {
color: blue;
font-weight: lighter;
font-size: 20px;
text-align: center;
}
#op{
opacity: 0.3;
text-align: center;
}
</style>
</head>
<body>
<h2>Setting the opacity level for division element using the CSS</h2>
<h3 id="content">Tutorial Point</h3>
<div id="op">
Example program for the Opacity Level
</div>
</body>
</html>
Using JavaScript to Change the opacity level for a division element
Follow the below-given steps to set the opacity level for a division element using JavaScript −
Step 1 − Let’s define the style for the heading and div elements of the HTML Document which is going to set the opacity level for a div element. For a h3 element, we defined the color, font-weight, font-size, and text-align. For the div element, we defined the text-align.
Step 2 − Under the body section, we defined the heading, div, button and script elements.
Step 3 − For the button element, the opacityFun() method is defined. Using this method opacity level will be changed.
Step 4 − In opacityFun() method, the id is mentioned clearly for which method functionality should be performed.
Step 5 − The style opacity property is the HTML DOM property which is used to set the opacity level.
Step 6 − After clicking the button, the onClick event function is triggers and it set the opacity for a div element.
Example
In this example, we will set the opacity level for a div element using JavaScript.
<html>
<head>
<style>
.heading {
color: violet;
font-weight: bolder;
font-size: 18px;
text-align: center;
}
#div1 {
text-align: center;
}
</style>
</head>
<body>
<h2>Setting the opacity level for division element using the JavaScript</h2>
<h3 class="heading">Tutorix</h3>
<div id="div1">
Example program for the Opacity Level
</div>
<br></br>
<button type="button" onclick="opacityFun()">
Click Here to set the opacity
</body>
<script>
function opacityFun() {
document.getElementById("div1").style.opacity = "0.2";
}
</script>
</html>
Conclusion
In this article, we have demonstrated how to set the opacity level for a div element along with examples. We have seen the two different examples here, in the first example, we set the opacity level for element of div using the simple CSS. In the second example, we change the division element opacity level by using the JavaScript. Here, we used the onclick event and style opacity property to change the opacity level.
141 Views
