JS使用變量作爲document.getElementById的ID不起作用？

Question

我很困惑，爲什麼這是OT工作：

var blocks = document.getElementsByTagName("td"); 
     var i = 0; 
     for(i=0;i<blocks.length;i++){ 
      var id = String(blocks[i].id); 
      var col_pos_y = document.getElementById(id).style.top; 
      alert(col_pos_y); 

     } 

我失去了一些東西，因爲Firefox的似乎只是警告了一個空白的警告信息？任何人都知道爲什麼這不起作用？

這是產生的HTML/PHP代碼TD的

<table cellspacing="0" cellpadding="0" style="position: absolute; top: 80%; z-index:5;" border="0"> 
<?php 
$blocks = array(); 
for($k=1;$k<=3;$k++){ 
    $row_number = "row_".$k; 
?> 
    <tr id="<?php echo $row_number; ?>"> 
<? 
    for($i=0;$i<=100;$i++){ 
     if($k==1){ 
      $rand_number = rand(0, 100); 
     } 
     else if($k==2){ 
      $rand_number = rand(30, 100); 
     } 
     else if($k==3){ 
      $rand_number = rand(50, 100); 
     } 
     if($rand_number<50){ 
      for($l=0;$l<=count($blocks);$l++){ 
       $row_counter = $k-1; 
       if($blocks[$l]=="row_".$row_counter."_col_".$i."_type_grass"){ 
        $block_exists="true"; 
        break; 
       } 
       else{ 
        $block_exists="false"; 
       } 
      } 
      if($block_exists=="true"){ 
       array_push($blocks, $row_number."_col_".$i."_type_grass"); 

       $background_position = generate_dirt_block(); 
       ?> 
        <td id="<?php echo $row_number; ?>_col_<?php echo $i ?>_type_grass" style="font-size: 10px; cursor: pointer; background-image:url('img/terrain.png'); background-repeat: no-repeat; background-position: <?php echo $background_position ?>; min-width: 32px; height: 32px;"> 

        </td> 
       <?php 
      } 
      else{ 
       array_push($blocks, $row_number."_col_".$i."_type_blank"); 
       ?> 
        <td id="<?php echo $row_number; ?>_col_<?php echo $i ?>_type_blank" style="font-size: 10px; min-width: 32px; height: 32px;"> 

        </td> 
       <?php 
      } 
     } 
     else if($rand_number>=50 && $rand_number<=100){ 
      array_push($blocks, $row_number."_col_".$i."_type_grass"); 
      for($l=0;$l<=count($blocks);$l++){ 
       $row_counter = $k-1; 
       if($blocks[$l]=="row_".$row_counter."_col_".$i."_type_grass"){ 
        $block_exists="true"; 
        break; 
       } 
       else{ 
        $block_exists="false"; 
       } 
      } 
      if($block_exists=="true"){ 
       $background_position = generate_dirt_block(); 
       ?> 
        <td id="<?php echo $row_number ?>_col_<?php echo $i ?>_type_grass" style="font-size: 10px; cursor: pointer; background-image:url('img/terrain.png'); background-repeat: no-repeat; background-position: <?php echo $background_position ?>; min-width: 32px; height: 32px;"> 

        </td> 
       <?php 
      } 
      else{ 
       ?> 
        <td id="<?php echo $row_number; ?>_col_<?php echo $i ?>_type_grass" style="font-size: 10px; cursor: pointer; background-image:url('img/terrain.png'); background-repeat: no-repeat; background-position: 0px -32px; min-width: 32px; height: 32px;"> 
         <div style="width: 100%; position: relative; top: 0px;"> 
          <div style="background-image:url('img/terrain.png'); background-repeat: no-repeat; background-position: -384px 0px; width: 32px; height: 10px; position: absolute; top: -17px;"> 

          </div> 
         </div> 
        </td> 
       <?php 
      } 
     } 
    } 
?> 
    </tr> 
<?php 
} 
?> 
</table> 

Answer 1

如果getElementById()不能正常工作，然後試圖訪問.style.top的返回值將錯誤，並且alert將永遠不會達到。

元素的.style.top屬性只是空白的（表示它尚未使用JavaScript或style屬性進行設置）。

如果要訪問通過級聯應用的屬性，請使用getComputedStyle。

如果要通過正常流程設置其位置，則使用offsetTop）。