JS использовать переменную как id для document.getElementById Не работает?

Question

Я запутался, почему это ВЗ рабочим:

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

     } 

ли я что-то отсутствую, потому что светлячок кажется просто предупредит из сообщений пустого предупреждения? Кто-нибудь понял, почему это не работает?

Это HTML/PHP код для генерации ТД

<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, если вы хотите определить его положение в соответствии с нормальным потоком).