JavaScript Code

How to change shadow of a div using JavaScript?

Tutorials using JS

Problem Statement

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