How to Change Opacity of HTML Element using Javascript

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>

Output

How to change opacity of html element using Javascript

Hello, folks, I am a founder of dineshkrish.com. I love Java and Open source technologies, If you find my tutorials are useful, please consider making donations to these charities.