js只更改父级属性值，子级的样式自动变化，用css的attr()函数应

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

我希望js只需更改父级 section 的html数据属性，就可以控制它的子DIV 的样式。
我用css的 attr() 获取数据属性，然后存为css 变量。然后所有子DIV，应用父级变量。

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

<section url="https://s1.ax1x.com/2020/07/12/U38sKO.th.png"  num="100">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</section>
section {
    --bgurl:attr(url);
    --num:attr(num);
}
section div{
    background-image: url(var(--bgurl));
    filter: blur(var(--num)px);
}

###

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

--MDN

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    section div{
      background-image: var(--bgurl);
      filter: blur(var(--num));
      height: 400px;
      color: #fff;
      font-size: 100px;
    }
  </style>
</head>
<body>
  <section id="test" url="https://s1.ax1x.com/2020/07/12/U38sKO.th.png"  num="100">
    <div>1</div>
</section>
  <script>
    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)
  </script>
</body>
</html>