Tutorials using JS
Change shadow of a div using JavaScript
In this tutorial, you shall learn how to change the box shadow of a div element using JavaScript.
Solution
To set or change the box shadow of a div element using JavaScript, we can use Element.style.boxShadow
property. Get the div element and set its style.boxShadow
property with the required box-shadow value.
divElement.style.boxShadow = '2px 2px 10px 5px blue';
Program
When user clicks on the Click me
button, we get the div element with the id myDiv
and set its box shadow to 2px 2px 10px 5px blue
using style.boxShadow
property.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Tutorial</h1>
<button id="myBtn">Click me</button>
<div id="myDiv">About</div>
<style>
#myDiv {
width: 100px;
height: 100px;
background: yellow;
}
</style>
<script>
document.getElementById("myBtn").addEventListener("click", function() {
//get the div element
const myDiv = document.getElementById("myDiv");
//set the shadow of the div
myDiv.style.boxShadow = '2px 2px 10px 5px blue';
});
</script>
</body>
</html>