在循环中使用.getAttribute添加样式

问题描述

第一个帖子在这里。希望有人可以帮忙吗？！

我正在尝试通过在HTML中添加数据属性，然后使用JS遍历轮播中的每个图像，来为我创建的视差轮播中添加样式。我能够将“数据背景”添加到内联样式中，但“数据位置”却没有。

预期产量

<div class="parallax-container parallax-scale" 
data-background="//localhost:3000/wp-content/uploads/2020/03/animage.jpg" 
data-position="50% 50%" data-swiper-parallax="1130.25" 
style="transform: translate3d(0px,0px,0px); background-image: url("//localhost:3000/wp-content/uploads/2020/03/animage.jpg"); background-position: 50% 50%;">

var list = document.getElementsByClassName('parallax-container');

for (var i = 0; i < list.length; i++) {
  var src = list[i].getAttribute('data-background');
  list[i].style.backgroundImage = "url('" + src + "')";
  var pos = list[i].getAttribute('data-position');
  list[i].style.backgroundPosition = pos;
  console.log(list[i])
}

<div class="parallax-container parallax-scale" data-background="//localhost:3000/wp-content/uploads/2020/03/animage.jpg" data-position="50% 50%">

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript loops