Javascript DOM CSS Style boxShadow Property

Introduction

Add a box-shadow to a div element: 

document.getElementById("myDIV").style.boxShadow = "10px 20px 30px blue";

Click the button to set the boxShadow property of the DIV element:

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {//from  w  w w .ja  v a2s.c  om
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: coral;
  color: white;
}
</style>
</head>
<body>
<button onclick="myFunction()">Test</button>

<div id="myDIV">
  <h1>myDIV</h1>
</div>

<script>
function myFunction() {
  document.getElementById("myDIV").style.boxShadow = "10px 20px 30px lightblue";
}
</script>

</body>
</html>

The boxShadow property sets or gets the drop-shadows of a box element.

The boxShadow property attaches one or more drop-shadows to the box.

The property is a comma-separated list of shadows.

The list of value each sets two to four length values, an optional color, and an optional inset keyword.

Omitted lengths are 0.

Property Values

ValueDescription
none Default. No shadow is displayed
h-shadow Required. The position of the horizontal shadow. Negative values are allowed
v-shadow Required. The position of the vertical shadow. Negative values are allowed
blur Optional. The blur distance
spread Optional. The size of shadow
colorOptional. The color of the shadow. The default value is black.
insetOptional. Changes the shadow from an outer shadow (outset) to an inner shadow
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The boxShadow property returns a String representing the box-shadow property of an element.




PreviousNext

Related