JavaScript Code

How to change shadow of a div using JavaScript?

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>

Copyright @2022