How to Change Opacity of HTML Element in JavaScript?

JavaScript – Change the Opacity of HTML Element

To change the opacity of a HTML Element using JavaScript, get reference to the HTML Element 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.

In the following example, we will change the opacity of HTML Element with id "myElement" to "0.2", in JavaScript, using element.style.opacity property.

example.html

Conclusion

In this JavaScript Tutorial, we learned how to change the opacity of a HTML Element using JavaScript.