Question

我是JavaScript的新手。并且患有问题...

我的结构就像......

<div id=container>
    <div class="contdiv" data-rate="1.00" id= "l1"></div> 
    <div class="contdiv" data-rate="4.00"></div> 
    <div class="contdiv" data-rate="8.00"></div> 
</div>

“contdiv”的数量不固定，可以添加删除...所以我必须动态地获取这些...“data-rate”值对每个都是可变的，并且也想用JavaScript访问它。。我想用javascript动态地选择带有contdiv类的所有div ...我可以用java脚本做..

var totalel = document.getElementsByClassName("layer");

我想要做的是......我想访问每个div的顶部位置并为每个顶部位置添加“数据速率”值...每次移动鼠标时都应调用此函数....

<script>
function myfunction(event) {

    var box1 = document.getElementById("l1");
    var obx = box1.offsetTop;
    var newxpos = obx + (here i want "data-rate" value) ; 
    var nxpos = newxpos + 'px';
    document.getElementById("l1").style.top = nxpos;

   }
 document.onmousemove = myfunction;
 </script>

现在我已经为div分配了ID ...但是我不想要ID ...它应该将所有div存储在变量中并且应该在语法上添加其顶级样式的速率...这应该发生在我每次移动我的时候鼠标...或按任意键...（按键是可选的）

我知道这是很多工作......但任何帮助我都会非常感谢他们......

Answer 1

当getElementsByClassName()返回一个元素数组时，您可以使用for循环迭代它们。可以使用getAttribute()

请求属性值

function myfunction(event) {
  var boxes = document.getElementsByClassName("contdiv");
  for(var i = 0; i < boxes.length; i++) {
    var obx = boxes[i].offsetTop;
    var newxpos = obx + boxes[i].getAttribute("data-rate") ;
    boxes[i].style.top = newxpos + 'px';
  }
}

使用类动态地使用javascript控制多个潜水风格的样式

1 个答案: