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>