動態使用java腳本控制多個潛水風格的風格，使用類

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」不固定的數量，可以添加刪除...所以我得那些動態...「數據速率」值是可變的每一個，並希望訪問它也用JavaScript ... 我想選擇所有div與動態與contdiv類與JavaScript ...這我可以用java腳本。 。

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

我想要做的是...我想訪問頂部pos每格的銀行足球比賽，並添加「數據流」的價值各頂部位置......這個功能應該叫，每次我提出我的鼠標....

<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> 

現在我有分配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'; 
    } 
}