在我的 css 中获取随机变量模糊
Getting a random variable blur in my css
我想将数学函数的结果放入我的 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");
检查你的控制台。你应该有一个错误说 blur
is undefined.
blur
不是 JS 中定义的函数,而是 CSS 过滤函数,因此在您的情况下应设置为字符串。
例如:
document.getElementById("test").style.filter = 'blur('+result+'px)';
如果您的情况可以使用 ES6,您还可以使用 template string 并将值插入为嵌入表达式:
document.getElementById("test").style.filter = `blur(${result}px)`;
您需要将模糊作为文本值传递给 CSS 过滤器 属性:
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>
将该样式设置为字符串:
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>
我想将数学函数的结果放入我的 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");
检查你的控制台。你应该有一个错误说 blur
is undefined.
blur
不是 JS 中定义的函数,而是 CSS 过滤函数,因此在您的情况下应设置为字符串。
例如:
document.getElementById("test").style.filter = 'blur('+result+'px)';
如果您的情况可以使用 ES6,您还可以使用 template string 并将值插入为嵌入表达式:
document.getElementById("test").style.filter = `blur(${result}px)`;
您需要将模糊作为文本值传递给 CSS 过滤器 属性:
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>
将该样式设置为字符串:
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>