JS使用变量作为document.getElementById的id不起作用

JS use variable as id for document.getElementById Not working?

本文关键字:getElementById id 不起作用 document 变量 JS      更新时间:2023-09-26

我很困惑为什么这不起作用:

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

我是不是错过了什么,因为萤火虫似乎只是发出了一条空白的警报信息?有人知道为什么这不起作用吗?

这是用于生成td的的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>

如果getElementById()不工作,那么尝试访问返回值上的.style.top将出错,并且永远无法访问alert

元素的.style.top属性只是空白(表示它没有用JavaScript或style属性设置)。

如果要访问通过级联应用的属性,请使用getComputedStyle

如果您想通过正常流量计算出其位置,请使用offsetTop)。