控制不止一次跳水的风格's风格使用java脚本动态，使用类

Controlling styles of more than one dive's styles using java script dynamically, using class

本文关键字：风格 java 脚本 动态 跳水 不止一次 控制      更新时间：2023-09-26

我是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"的数量是不固定的，那些可以添加删除。。。所以我必须动态地获取这些。。。"数据速率"值对每个值都是可变的，并且希望也使用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存储在变量中，并且应该在语法上将rate添加到其顶部样式中。。。每次我移动鼠标时都会发生这种情况。。。或者按任意键。。。（可选择按键）

我知道这是一项艰巨的工作。。。但任何帮助我都会非常感谢他们。。。

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';
  }
}
相关文章：