Latest web development tutorials

×

JavaScript Reference

JavaScript

JS String JS Number JS Operators JS Statements JS Math JS Date JS Array JS Boolean JS RegExp JS Global JS Conversion

Browser BOM

Window Navigator Screen History Location

HTML DOM

DOM Document DOM Elements DOM Attributes DOM Events DOM Style

HTML Objects

<a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <datalist> <dd> <del> <details> <dfn> <dialog> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <footer> <form> <head> <header> <h1> - <h6> <hr> <html> <i> <iframe> <img> <ins> <input> button <input> checkbox <input> color <input> date <input> datetime <input> datetime-local <input> email <input> file <input> hidden <input> image <input> month <input> number <input> password <input> radio <input> range <input> reset <input> search <input> submit <input> text <input> time <input> url <input> week <kbd> <keygen> <label> <legend> <li> <link> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <s> <samp> <script> <section> <select> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <td> <th> <tr> <textarea> <time> <title> <track> <u> <ul> <var> <video>

Other Objects

CSSStyleDeclaration

Style opacity Property

Example

Make a DIV element transparent:

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

Try it Yourself »

Definition and Usage

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

The opacity-level of an element describes the transparency-level, where 1 is not transperant at all, 0.5 is 50% see-through, and 0 is completely transparent.

Browser Support

The opacity property is supported in all major browsers.

Note: IE8 and earlier supports an alternative, the filter property.

Syntax

Return the opacity property:

object.style.opacity

Set the opacity property:

object.style.opacity="number|initial|inherit"

Property Values

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

Technical Details

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

Related Pages

CSS reference: opacity property