How to Change Opacity of HTML Element using Javascript

on February 2, 2017

Post Views: 2,282

Change Opacity of HTML Element using Javascript

In this example, We will show you about How to change opacity of html element using javascript. The example has been tested and output attached in the post.

Java Script Function

function changeOpacity(obj) {
document.getElementById("img").style.opacity = (obj.value/100);
}

Final Example

<html>
<head>
<title>How to change opacity of html element using Javascript</title>
<head>
<body>
<div style="text-align:center;">
<div>
<img src="java.jpg" alt="Sample Image" style="width:300px;height:300px;border:1px solid black;" id="img" />
</div>
<div>
</br>
<input type="range" id="customizeOpacity" value="0" onchange="changeOpacity(this);" />
<div>
<div>
<script>
function changeOpacity(obj) {
document.getElementById("img").style.opacity = (obj.value/100);
}
</script>
</body>
<html>