Javascript DOM CSS Style opacity Property

Introduction

Make a DIV element transparent:

document.getElementById("myDIV").style.opacity = "0.5";

Click the button to see through the blue DIV element:

View in separate window

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {/*  ww  w . j av  a2  s  .com*/
  position: absolute;
  width: 300px;
  height: 150px;
  background-color: lightblue;
  border: 1px solid black;
}

#DIV2 {
  position: relative;
  top: 130px;
  left: 30px;
  width: 300px;
  height: 150px;
  background-color: red;
  border: 1px solid black;
}
</style>
</head>
<body>

<button onclick="myFunction()">Test</button>

<div id="DIV2">
  <h1>Voila!</h1>
</div>

<div id="myDIV">
</div>

<script>
function myFunction() {
  document.getElementById("myDIV").style.opacity = "0.5";
}
</script>

</body>
</html>

The opacity property sets or gets the opacity level of an element.

The opacity-level of an element describes the transparency-level.

1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.

Property Values

Value	Description
number	Sets the opacity. From 0.0 (fully transparent) to 1.0 (fully opaque)
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

The opacity property Default Value: 1

The opacity property returns a String representing the opacity-level of an element.

Previous Next