更改絕對div在相對div內的位置僅適用於數字0

Question

我有一個主要的相對DIV。 在那個div內，我有一些絕對的div與圖像。 下面的部分代碼示例：

   <div  id="loopdiv" style="position:absolute; left:0px; top:0px; width:2000px; height:1333px;">
        <div style="position:absolute; left:0px; top:0px; width:2000px; height:25px;">
            <img id="index_01" src="image3/index_01.jpg" width="2000" height="25" alt="" />
        </div>
        <div style="position:absolute; left:0px; top:25px; width:102px; height:1308px;">
            <img id="index_02" src="image3/index_02.jpg" width="102" height="1308" alt="" />
        </div>
....
...

我想使用javascript更改這些相對div的位置。 這是我的javascipt代碼：

var divs = new Array();
var loopdiv = document.getElementById('loopdiv');
divs =loopdiv.getElementsByTagName('div'); 

for (var i=0;i<divs.length;i++){ 
divs[i].style.position ="absolute";
divs[i].style.left=0;
divs[i].style.top=0;
alert(divs[i].style.left+"||"+i);
alert(divs[i].style.right+"||"+i);

奇怪的是，javascript中的值0有效。 所有的div都轉到0,0位置。 但是，如果我嘗試將值設置為另一個數字。 例如：

divs[i].style.left=300;
    divs[i].style.top=300;

現在，div保持在HTML位置。 他們不會輸入300或我輸入的任何其他數字。只能是0。

有人知道為什么嗎？

Answer 1

您沒有定義單位標識符。

在原始情況下，您要將頭寸清零，實際上是在做：

divs[i].style.left=0 === divs[i].style.left='0px';

...因此，為了使您的示例可以使用pixel ，請使用px ：

divs[i].style.left = 300; -> divs[i].style.left = '300px' ;

---

更新

要確認我的答案，請查看CSS值和單位規范： http : //www.w3.org/TR/REC-CSS1/ 。 請注意，它說單位標識符僅在值為0時才是可選的。

長度值的格式是一個可選的符號字符（“ +”或“-”，默認為“ +”），后跟一個數字（帶或不帶小數點），后跟一個單位標識符（兩個-字母縮寫）。 在數字“ 0”之后，單位標識符是可選的。