How can I use box-shadow with JavaScript

Question

How can I use box-shadow with JavaScript
Using style.
For example I can do element.style.top = 10px;

Answer 1

You can use 👇
object.style.boxShadow = "value";

For example :

HTML ➡️
<div id="shadow">This Box has box-shadow</div>

JavaScript ➡️
document.getElementById("shadow").style.boxShadow = "5px 10px #888";

Answer 2

Well I suggest that that should be done with css so to do that just
element.style = "there put your declaration';

Answer 3

Using js to style is not good practice, if code is long it gets hard to change or debug style.
You can append class name or id with js and keep all styles inside css, if you need to change you can easier find thing you need.

Here is how you can set box shadow with pure js, without using class/id, but I still suggest you to use this in your codes.
https://www.w3schools.com/jsref/prop_style_boxshadow.asp

And how to append class name using js:
https://www.w3schools.com/howto/howto_js_add_class.asp

Answer 4

Thank you 😊