html滑动子级父级变化,js只更改父级属性值，子级的样式自动变化，用css的attr()函数应该怎么写?...

我希望js只需更改父级 section 的html数据属性，就可以控制它的子DIV 的样式。

我用css的 attr() 获取数据属性，然后存为css 变量。然后所有子DIV，应用父级变量。

为什么不对？ 具体该怎么写？

1

2

3

4

section {

--bgurl:attr(url);

--num:attr(num);

}

section div{

background-image: url(var(--bgurl));

filter: blur(var(--num)px);

}

回答

注意:  attr() 理论上能用于所有的CSS属性但目前支持的仅有伪元素的 content 属性，其他的属性和高级特性目前是实验性的

Document

section div{

background-image: var(--bgurl);

filter: blur(var(--num));

height: 400px;

color: #fff;

font-size: 100px;

}

1

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)