在Javascript中创建变量以操纵CSS框阴影

我正在使用Javascript创建一个CSS编辑器。我希望用户能够更改CSS框阴影的属性。我想函数应该是这样的：

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)

我不知道如何以CSS框阴影可以理解的方式格式化字符串。

---

谢谢

您可以将字符串连接在一起。请记住，您需要首先验证用户输入。否则，如果用户插入错误的值，

框阴影

将无法正确显示

box.style.boxShadow = offsetX + ' ' + offsetY + ' ' + blurRadius + ' ' + spreadRadius + ' ' + color;

使用ES6，您还可以使用：

---

下面是一个活生生的例子：

函数apply（）{
var-box=document.getElementById（'box'）；
var offsetX=document.getElementById（'offsetX'）.value；
var offsetY=document.getElementById（'offsetY'）.value；
var blurRadius=document.getElementById（'blurRadius'）。值；
var spreadRadius=document.getElementById（'spreadRadius'）。值；
var color=document.getElementById（'color'）。值；
box.style.boxShadow=offsetX+''+offsetY+''+blurRadius+''+spreadRadius+''+color；
}

#框{
宽度：100px；
高度：100px；
背景#f2f2；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
输入{
显示：块；
}

应用

var first=“10px”；
var second=“20px”；
var third=“红色”；
$（“#bshadow_jquery”）.css（'box-shadow'，first+“”+second+“”+third）

#b阴影(css){
边框：1px实心；
填充：10px；
盒影：5px10px；
}
#bshadow_jquery{
边框：1px实心；
填充：10px；
}
盒影css:5px 5px#990000:
这是css的一个块阴影


盒影jquery:5px 5px#990000:
这是JQuery提供的块阴影

谢谢。我意识到我没有正确格式化字符串

我正在编写的代码：

 box.style.boxShadow = String(h-offset + v-offset + blur + spread + color);

我需要编写的代码：

 box.style.boxShadow = String(h-offset + " " + v-offset + " " + blur + " " + spread + " " + color);

几乎是一个“好的”时刻XD
可以在中找到box shadow属性的语法。将变量连接在一起应该是一个简单的问题。您可以简单地使用
box.setAttribute（“style”、“…您将在CSS中编写什么…”）
你不应该使用
String（）
构造函数，你可以不使用它。谢谢。我的意思是，无论哪种方法都有效，但我确实删除了它。这个答案不包括任何解释，而且与已有的答案相比，它没有增加任何附加值（相同的方法，但不必要地添加jQuery依赖项）。
 box.style.boxShadow = String(h-offset + " " + v-offset + " " + blur + " " + spread + " " + color);