JS использовать переменную в качестве идентификатора для 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);

        }

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

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