javascript - Style.Top 属性不会持久

Question

我的 php 页面有问题。我想要的是一个按钮，可以放置一个表格(用php插入)以将其TOP从310px更改为500px。 该表的开头如下:

<?php
print('<table id="bloque" style="top:310px;">');
print("<tr>");
print("<th>Código</th>");
?>

我的脚本是这样的:

<script type="text/javascript">
    function nuevo(){
        document.getElementById("bloque").style.top="500px";
    }       
</script>

我的按钮是这样的:

<INPUT TYPE="submit" VALUE="Nuevo Registro" onClick="nuevo();">

当我单击该按钮时，表格会转到前 500 像素，但会立即返回到 310 像素。我是否缺少某些属性？

Answer 1

您使用的是提交按钮，而不是实际按钮。 将 HTML 更改为

<button type="button" onclick="nuevo();">Nuevo Registro</button>

function nuevo() {
  document.getElementById("bloque").style.top = "500px";
}

#bloque {
  position: absolute;
}

<table id="bloque" style="top:310px;">
  <tr>
    <th>Código</th>
  </tr>
</table>


<button onclick="nuevo();" type="button">Nuevo Registro</button>