Javascript 下面所有div上的css模糊效果

我有一系列的div，我想模糊所有的div；不幸的是，我得到的唯一东西是模糊第一个div，它的类具有模糊效果

当我按下按钮时，我希望hello world变得模糊； 事实上，当我按下按钮时，hello world这个词保持不变

（）上的函数{ var x=document.getElementsByClassName（“覆盖”）； var y=document.getElementsByClassName（“模糊”）； 如果（（x[0].style.display==“无”）&&（y[0].style.display==“无”））{ x[0].style.display=“块”； y[0]。style.display=“块”； }否则{ x[0]。style.display=“无”； y[0]。style.display=“无”； } }

正文{
背景色：白色；
文本对齐：居中；
颜色：黑色；
字体系列：Arial、Helvetica、无衬线字体；
宽度：800px；
高度：600px；
}
.模糊{
显示：无；
位置：绝对位置；
宽度：800px；
高度：600px；
背景色：rgba（44,44,27,0.527）；
过滤器：模糊（8px）；
z指数：1；
}
德斯托先生{
位置：绝对位置；
最高：82%；
左：25%；
右：25%；
z指数：1；
}
.覆盖{
位置：绝对位置；
显示：无；
宽度：35%；
身高：42%；
最高：28%；
左：25%；
右：25%；
底部：20%；
背景色：#ffb87d；
z指数：2；
光标：指针；
}
.按钮{
背景色：rgb（255、127、80）；
填充：24px；
颜色：rgb（255、255、255）；
边界半径：15px 15px；
}
托科先生{
显示：块；
边框：实心4px；
位置：绝对位置；
宽度：800px；
高度：600px；
z指数：2；
}

页面标题
你好，世界！
托克
兰西亚
第一

所以我给了“Hello World”一个id，当你点击按钮时，它会模糊它。如果您再次单击，它将恢复正常

（）上的函数{ var x=document.getElementsByClassName（“覆盖”）； var y=document.getElementsByClassName（“模糊”）； 如果（（x[0].style.display==“无”）&&（y[0].style.display==“无”））{ x[0].style.display=“块”； y[0]。style.display=“块”； document.getElementById（“test”）.style.filter=“blur（8px）”； }否则{ x[0]。style.display=“无”； y[0]。style.display=“无”； document.getElementById（“test”）.style.filter=“blur（0px）”； } }

正文{
背景色：白色；
文本对齐：居中；
颜色：黑色；
字体系列：Arial、Helvetica、无衬线字体；
宽度：800px；
高度：600px；
}
.模糊{
显示：无；
位置：绝对位置；
宽度：800px；
高度：600px；
背景色：rgba（44,44,27,0.527）；
过滤器：模糊（8px）；
z指数：1；
}
德斯托先生{
位置：绝对位置；
最高：82%；
左：25%；
右：25%；
z指数：1；
}
.覆盖{
位置：绝对位置；
显示：无；
宽度：35%；
身高：42%；
最高：28%；
左：25%；
右：25%；
底部：20%；
背景色：#ffb87d；
z指数：2；
光标：指针；
}
.按钮{
背景色：rgb（255、127、80）；
填充：24px；
颜色：rgb（255、255、255）；
边界半径：15px 15px；
}
托科先生{
显示：块；
边框：实心4px；
位置：绝对位置；
宽度：800px；
高度：600px；
z指数：2；
}

页面标题
你好，世界！
托克
兰西亚
第一

我建议在

.blur

css上只使用以下属性：

过滤器：blur（8px）

。所有其他属性，例如

宽度

，

高度

等，与模糊元素无关。将这些属性添加到另一个类中。“所有底层div”是什么意思？

.tocco

的所有儿童div？如果我的答案正确，您能接受吗？我以另一种方式得出了解决方案，但您的解决方案肯定更好，非常感谢！另一件事：为什么我必须点击两次按钮才能激活效果？至少第一次。。。可以立即操作吗？