- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
How to set the opacity level for an element with JavaScript?
Use the opacity property in JavaScript to set the opacity level. You can try to run the following code to set the opacity level for an element with JavaScript −
Example
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 450px;
background-color: gray;
}
</style>
</head>
<body>
<p>Click below to set Opacity.</p>
<button type="button" onclick="display()">Set Opacity</button>
<div id="box">
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
</div>
<br>
<script>
function display() {
document.getElementById("box").style.opacity = "0.5";
}
</script>
</body>
</html>
- Related Articles
- How to set the opacity level for a division element using CSS?
- How to set the type of positioning method used for an element with JavaScript?
- How to set the padding of an element with JavaScript?
- How to set the height of an element with JavaScript?
- How to set the margins of an element with JavaScript?
- Set the opacity of an image with CSS
- Set the opacity for the background color with CSS
- How to set the top position of an element with JavaScript?
- How to set the bottom padding of an element with JavaScript?
- How to set the left padding of an element with JavaScript?
- How to set the top padding of an element with JavaScript?
- How to set the right padding of an element with JavaScript?
- How to set the left margin of an element with JavaScript?
- How to set the horizontal alignment of an element with JavaScript?
- How to set the maximum height of an element with JavaScript?
Advertisements