Creating variables in Javascript to manipulate the CSS box-shadow
Question
I am creating a CSS editor using Javascript. I would like the User to be able to change the attributes of the CSS box-shadow. I imagine the function would look something like this:
var box = document.getElementById("boxDiv");
var h-offset; //= getUserInput (= document.getElementById("textareaID").value;)
var v-offset; //= getUserInput
var blur; //= getUserInput
var spread; //= getUserInput
var color; //= getUserInput
box.style.boxShadow =; //(h-offset,v-offset,blur,spread,color)
I am not sure how to format the String in a way the CSS box-shadow can understand it. Thanks!
3 answers
solution1
0 ACCPTED 2018-09-26 18:36:47
You can just concatenate the strings together. Keep in mind, that you need to validate the user input first. Otherwise, the box-shadow is not properly shown, if the user inserts a wrong value.
box.style.boxShadow = offsetX + ' ' + offsetY + ' ' + blurRadius + ' ' + spreadRadius + ' ' + color;
With ES6, you can also use template strings :
box.style.boxShadow = `${offsetX} ${offsetY} ${blurRadius} ${spreadRadius} ${color}`;
Here is a live example:
function apply() { var box = document.getElementById('box'); var offsetX = document.getElementById('offsetX').value; var offsetY = document.getElementById('offsetY').value; var blurRadius = document.getElementById('blurRadius').value; var spreadRadius = document.getElementById('spreadRadius').value; var color = document.getElementById('color').value; box.style.boxShadow = offsetX + ' ' + offsetY + ' ' + blurRadius + ' ' + spreadRadius + ' ' + color; }
#box { width: 100px; height: 100px; background: #f2f2f2; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } input { display: block; }
<div id="box"></div> <input id="offsetX" placeholder="offsetX" /> <input id="offsetY" placeholder="offsetY" /> <input id="blurRadius" placeholder="blurRadius" /> <input id="spreadRadius" placeholder="spreadRadius" /> <input id="color" placeholder="color" /> <button onclick="apply()">Apply</button>
solution2
0 2018-09-26 18:48:25
Thanks. I realized that I was not formatting the String correctly.
What I was coding:
box.style.boxShadow = String(h-offset + v-offset + blur + spread + color);
What I needed to code:
box.style.boxShadow = String(h-offset + " " + v-offset + " " + blur + " " + spread + " " + color);
Almost a 'Well Duh' moment XD
solution3
-1 2018-09-26 18:45:58
var first = "10px"; var second = "20px"; var third = "red"; $("#bshadow_jquery").css('box-shadow', first + " " + second + " " + third); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <style> #bshadow_css { border: 1px solid; padding: 10px; box-shadow: 5px 10px; } #bshadow_jquery { border: 1px solid; padding: 10px; } </style> </head> <body> <h2>box-shadow css: 5px 5px #990000:</h2> <div id="bshadow_css"> <p>this is a block-shadow by css</p> </div> <hr style="margin: 50px 0px"> <h2>box-shadow jquery: 5px 5px #990000:</h2> <div id="bshadow_jquery"> <p>this is a block-shadow by JQuery</p> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.