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似乎只是警告了一条空白的警报消息？任何人都知道为什么这不起作用？

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

Answer 1

如果getElementById()无效，那么尝试在返回值上访问.style.top会出错，并且永远不会达到alert。

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

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

如果您想通过正常流程设置其位置，请使用offsetTop。

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

1 个答案: