How to set opacity levels for subsection elements in CSS
How to Set the Opacity Level for Section Elements in CSS
The style.opacity property is used to set the opacity of an element and return a string value. These properties are used to set or return the opacity of different HTML elements. It is one of the HTML style opacity attributes.
The onclick event only occurs when a user clicks an element. It is a pure JavaScript attribute. Whenever you click on the onclick event, it performs some action, such as displaying a message or redirecting the user to another page. The use of onclick events must be reduced in your website as it may cause confusion to the users. So, use these events very wisely.
Syntax
Here is the syntax for setting the opacity level using JavaScript –
object.style.opacity = "number|initial|inherit"
Parameters
- number – Used to specify opacity
Example
In this example, we’ll use CSS to set the opacity level for a section element.
<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 of a Section Element
Follow the steps given below to set the opacity level of a section element using JavaScript.
Step 1 – Let’s define styles for the heading and div elements of the HTML document. This will set the opacity level for the div elements. For the h3 element, we defined the color, font-weight, font-size, and text-align. For the div element, we defined the text-align.
Step 2 – In the body section, we defined the heading, div, button, and script elements.
Step 3 – For the button element, we defined the opacityFun() method. Using this method will change the opacity level.
Step 4 – In the opacityFun() method, explicitly mention the id for which the function should be executed.
Step 5 – Style The opacity attribute is an HTML DOM property used to set the opacity level.
Step 6 — After clicking the button, the onClick event function is triggered, which sets the opacity of a div element.
Example
In this example, we’ll use JavaScript to set the opacity level of a div element.
<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>
Summary
In this article, we demonstrated how to set the opacity level for div elements. We saw two different examples. In the first example, we used simple CSS to set the opacity level for a div element. In the second example, we used JavaScript to change the opacity level of a div element. Here, we used the onclick event and the style opacity attribute to change the opacity level.