opacity Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:opacity

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. opacity

Description

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

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

Property Values

Value Description
number 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.

Technical Details

Item Value
Default Value: 1
Return Value: A String, representing the opacity-level of an element
CSS VersionCSS3

Make a DIV element transparent:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {//from   w ww.j  a  v a2  s  .co  m
    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: coral;
    border: 1px solid black;
}
</style>
</head>
<body>

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

<div id="DIV2">
  <h1>test</h1>
</div>

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

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

</body>
</html>

Related Tutorials