在我的 css 中得到一个随机变量模糊

Question

我希望数学函数的结果到我的css文件中，模糊的类型是可变的。但它不起作用，我不知道如何，因为没有错误。变量数介于 1 和 5 之间。

这是我正在使用的Javascript代码：

var minNumber = 1;
var maxNumber = 5;
var result;
var randomNumber = randomNumberFromRange(minNumber, maxNumber);
function randomNumberFromRange(min, max) {
    result = Math.floor(Math.random() * (max - min + 1) + min);
    return;
}

document.getElementById("test").style.filter = blur(result + "px");

Answer 1

将该样式设置为字符串：

document.getElementById("test").style.filter = "blur(" + result + "px)";

var minNumber = 1;
var maxNumber = 5;
var result;
var randomNumber = randomNumberFromRange(minNumber, maxNumber);
function randomNumberFromRange(min, max) {
  result = Math.floor(Math.random() * (max - min + 1) + min);
}
document.getElementById("test").style.filter = "blur(" + result + "px)";

#test {
  position: absolute left: 10px;
  top: 10px;
  background-color: lightgreen;
  width: 200px;
  height: 200px;
  z-index: 9999;
  opacity: .9;
}
#test2 {
  position: absolute;
  left: 30px;
  top: 40px;
  background-color: black;
  width: 100px;
  height: 100px;
}

<div id="test">
</div>
<div id="test2"></div>

Answer 2

检查您的主机。您应该有一个错误，指出blur未定义。

blur不是在JS中定义的函数，而是一个CSS过滤器函数，因此应该在您的情况下设置为字符串。

例如：

document.getElementById("test").style.filter = 'blur('+result+'px)';

如果 ES6 在您的情况下是可能的，您还可以使用模板字符串并将该值作为嵌入式表达式插入：

document.getElementById("test").style.filter = `blur(${result}px)`;

Answer 3

您需要

将模糊作为文本值传递给 CSS filter 属性：

var minNumber = 1;
var maxNumber = 5;
var result;
var randomNumber = randomNumberFromRange(minNumber, maxNumber);
function randomNumberFromRange(min, max) {
    result = Math.floor(Math.random() * (max - min + 1) + min);
    return;
}
console.log('random value for blur: ', result);
document.getElementById("test").style.filter = 'blur('+ result +'px)';

<p id="test">test</p>