不刷新页面，用onclick或别的方法能调整div的位置吗？

请问怎样在不刷新页面的情况下调整div的位置： 
<table width="500"> 
  <tr> 
    <td>左边距100像素</td> 
    <td>左边距200像素</td> 
  </tr> 
  <tr> 
    <td colspan="2"><div id="Layer1" style="position:absolute; z-index:1">456</div>123</td> //div默认靠左，在表格内容的上方，需要左右移动。
  </tr> 
</table> 点击<td onclick="Create()">左边距100像素</td>，使层div的左边距为100像素； 
点击<td onclick="Create()">左边距200像素</td>，使层div的左边距为200像素。

解决方案 »

  1.   

    你用js改变div的CSS不起作用么?
      

  2.   

    function Create(){
    document.getElementById('Layer1').style.left='100px'
    }
      

  3.   

    完全可以,用JavaScript直接取得div后,再进行控制就可以了.很方便,而且网上有很多这样的例子代码.
      

  4.   

    可以移动了，谢谢！但这样做出来的div是相对于浏览器移动，而不是相对于表格的位置移动。谁能帮我把下面代码完善一下，写成相对于表格移动的：
    <table width="500" align="center">
      <tr>
        <td onclick="c1()">左边距100像素</td>
        <td onclick="c2()">左边距200像素</td>
      </tr>
      <tr>
        <td colspan="2"><div id="Layer1" style="position:absolute; z-index:1; left: 50;">456</div>
        123</td>
      </tr>
    </table>
    <script type="text/javascript">
    document.getElementById('Layer1').style.left='50px'
    function c1(){ 
    document.getElementById('Layer1').style.left='100px' 
    }
    function c2(){ 
    document.getElementById('Layer1').style.left='200px' 
    }
    </script>
      

  5.   


    function create()
    {
      var layer = document.getElementById('Layer1'), elem = layer, offset = 0;
      while (elem.tagName != 'BODY') 
      {
        elem = elem.parentNode;
        offset += elem.offsetLeft;
      }
      layer.style.left = (offset + 100) + 'px';
      

  6.   

    测试通过，谢谢！
    但我很菜，无法将div一开始的默认位置设定为距表格左边距为100，请大家指教（请写出具体代码）：
    <script type="text/javascript">
      var layer = document.getElementById('Layer1'), elem = layer, offset = 0; //我想用这几句来定位div的默认位置为左边距100，但不起作用。
      while (elem.tagName != 'BODY') 
      {
        elem = elem.parentNode;
        offset += elem.offsetLeft;
      }
      layer.style.left = (offset + 100) + 'px';
    function c1(){ 
      var layer = document.getElementById('Layer1'), elem = layer, offset = 0;
      while (elem.tagName != 'BODY') 
      {
        elem = elem.parentNode;
        offset += elem.offsetLeft;
      }
      layer.style.left = (offset + 200) + 'px';
    }
    function c2(){ 
      var layer = document.getElementById('Layer1'), elem = layer, offset = 0;
      while (elem.tagName != 'BODY') 
      {
        elem = elem.parentNode;
        offset += elem.offsetLeft;
      }
      layer.style.left = (offset + 300) + 'px';
    }
    function c0()
    {
      var layer = document.getElementById('Layer1'), elem = layer, offset = 0;
      while (elem.tagName != 'BODY') 
      {
        elem = elem.parentNode;
        offset += elem.offsetLeft;
      }
      layer.style.left = (offset + 100) + 'px';
    }
    </script>
    <table width="500" align="center">
      <tr>
        <td><div><div id="Layer1" style="position:absolute; z-index:1; left: 50;">456</div></div>
        123</td>
      </tr>
    </table>
    <div align="center">
      <input type="button" onClick="c0()" value="左边距100像素" />
      <input type="button" onClick="c1()" value="左边距200像素" />
      <input type="button" onClick="c2()" value="左边距300像素" />