How to Change Opacity of Div in JavaScript?

JavaScript – Change the Opacity of Div

To change the opacity of a div using JavaScript, get reference to the div element, and assign required opacity value to the element.style.opacity property.

Opacity value ranges from 0 to 1. For example, 0.2, 0.3, 0.8, 0.45, etc., are some of the values that can be assigned to opacity property.

<span class="pln">
</span><span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"en"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;head&gt;</span><span class="pln">
</span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"utf-8"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/head&gt;</span><span class="pln"> 
</span><span class="tag">&lt;body&gt;</span><span class="pln">
    </span><span class="tag">&lt;h2&gt;</span><span class="pln">Change Opacity of Div in JavaScript</span><span class="tag">&lt;/h2&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"myDiv"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;p&gt;</span><span class="pln">This is a paragraph in Div.</span><span class="tag">&lt;/p&gt;</span><span class="pln">
        </span><span class="tag">&lt;span&gt;</span><span class="pln">This is a span in Div.</span><span class="tag">&lt;/span&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;br&gt;</span><span class="pln">
    </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">changeStyle</span><span class="pun">()</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">Click Me</span><span class="tag">&lt;/button&gt;</span><span class="pln">

    </span><span class="tag">&lt;script&gt;</span><span class="pln">
    </span><span class="kwd">function</span><span class="pln"> changeStyle</span><span class="pun">(){</span><span class="pln">
        </span><span class="kwd">var</span><span class="pln"> element </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"myDiv"</span><span class="pun">);</span><span class="pln">
        element</span><span class="pun">.</span><span class="pln">style</span><span class="pun">.</span><span class="pln">opacity </span><span class="pun">=</span><span class="pln"> </span><span class="str">"0.2"</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
    </span><span class="tag">&lt;/script&gt;</span><span class="pln">

</span><span class="tag">&lt;/body&gt;</span><span class="pln">
</span><span class="tag">&lt;/html&gt;</span>