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

Question

我正在使用 Javascript 创建 CSS 编辑器。我希望用户能够更改 CSS box-shadow 的属性。我想这个函数看起来像这样：

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-shadow 可以理解的方式格式化字符串。谢谢！

Answer 1

您可以将字符串连接在一起。请记住，您需要先验证用户输入。否则，如果用户输入了错误的值，box-shadow 将无法正确显示。

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

有了ES6，你也可以使用template strings:

box.style.boxShadow = `${offsetX} ${offsetY} ${blurRadius} ${spreadRadius} ${color}`;

这是一个活生生的例子：

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>

Answer 2

  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>

Answer 3

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

我正在编码的内容：

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

我需要编码的内容：

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

几乎 'Well Duh' 时刻 XD

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

Creating variables in Javascript to manipulate the CSS box-shadow

javascript

html

css

box-shadow