我希望js只需更改父级 section 的html数据属性,就可以控制它的子DIV 的样式。
我用css的 attr() 获取数据属性,然后存为css 变量。然后所有子DIV,应用父级变量。
为什么不对? 具体该怎么写?
section {
--bgurl:attr(url);
--num:attr(num);
}
section div{
background-image: url(var(--bgurl));
filter: blur(var(--num)px);
}
回答
注意: attr() 理论上能用于所有的CSS属性但目前支持的仅有伪元素的 content 属性,其他的属性和高级特性目前是实验性的
Documentsection div{
background-image: var(--bgurl);
filter: blur(var(--num));
height: 400px;
color: #fff;
font-size: 100px;
}
var imgs = [
'https://tse2-mm.cn.bing.net/th/id/OIP.foO_O8mDfOAGzNHcLdgwegHaE8?w=242&h=180&c=7&o=5&dpr=2&pid=1.7',
'https://tse2-mm.cn.bing.net/th/id/OIP.qZ2wfvLkKt6rS4tLTsz0YAHaEK?w=288&h=180&c=7&o=5&dpr=2&pid=1.7',
'https://tse4-mm.cn.bing.net/th/id/OIP.XCnKffX9Nc7ca5njltgigQHaEK?w=288&h=180&c=7&o=5&dpr=2&pid=1.7'
]
var $test = document.getElementById('test');
setInterval(() => $test.style.cssText = `--bgurl: url(${imgs[Math.random()*3|0]});--num:${Math.random()*10}px`, 1000)