使用简单的 JavaScript 重新定位按钮答案

【问题标题】：Reposition button with simple JavaScript使用简单的 JavaScript 重新定位按钮
【发布时间】：2009-07-22 01:59:51
【问题描述】：

我对 JavaScript 非常陌生，并且只是第一次尝试学习。作为一个小练习，我正在尝试做一些简单的事情。

几乎我正在尝试重新定位页面加载时的按钮。我做错了什么？

我将不胜感激。

我的代码如下：

<style type="text/css">
    .mybutton{
      position:absolute;
    }
</style>

JavaScript：

<script type="text/javascript">
    window.onload=function(){
      var mytestdiv = document.getElementById("testdiv");
      var mytestbutton = document.getElementById("testdiv").childNodes()[0];
                
      var y = mytestdiv.offsetWidth;
      var x = mytestdiv.offsetHeight;
                
      mytestbutton.style.right = x;
      mytestbutton.style.top = y;
    }
</script>

还有我非常简单的html：

<body>
  <div id="testdiv" style="width:500px;border:solid #000000">
    <input type="submit" id="myButton" value="TestMe">
  </div>
</body>

编辑： 我在 firebug 中遇到的错误是：

mytestbutton.style 未定义

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

使用 CSS 设置位置时，您需要指定使用的测量值...试试这个：

mytestbutton.style.right = x + "px";
mytestbutton.style.top = y + "px";

编辑：

另外，你有.mybutton，而它应该是#mybutton。 . 指的是类，# 指的是IDs。

最后.childNodes 不是一个函数，它是一个属性，所以你不需要()，而且你有空格，所以你需要删除它或使用.childNodes[1] 而不是.childNodes[0]。

var mytestbutton = document.getElementById("testdiv").childNodes[1];

或者，你可以去

var mytestbutton = document.getElementById("myButton");

【讨论】：

+1 用于提及空白文本节点 - 不同浏览器之间的文本解析差异吸引了很多人 :-)

【解决方案2】：

这里有几个问题。首先，以下方法不起作用：

document.getElementById("testdiv").childNodes()[0]

childNodes 不是函数，而是一个类似数组的对象。应该是这样的：

document.getElementById("testdiv").childNodes[0]

但是，这也不是您想要的 - 因为testdiv 中的第一个节点是一个文本节点（由许多空格字符组成）。你可能想要这个：

document.getElementById("testdiv").childnodes[1]

但最简单的解决方案是这样的：

document.getElementById("myButton")

其次，正如另一个答案中提到的，您需要在将 CSS 样式分配给对象时指定单位。

【讨论】：

“因为 testdiv 中的第一个节点是文本节点” 我认为这取决于浏览器是否将空格转换为节点。
这很可能是真的。无论如何，我总是避免对节点索引进行硬编码——它非常脆弱。

【解决方案3】：

我强烈推荐使用一个优秀的免费 javascript 框架来处理这样的事情。 MooTools、JQuery、Prototype 和许多其他工具可以极大地简化从 javascript 动态设置 CSS 样式的过程，而无需担心一些古怪的事情，比如必须记住将“px”附加到位置值的末尾等. MooTools 和 JQuery 等 JavaScript 框架非常轻量级，但包含大量非常有用的功能，因此它们绝对值得研究：

// mootools

var el = $("myElement");
el.setStyle("left", 20);
el.setStyle("top", 10);

【讨论】：

在我熟悉核心 JavaScript 之前，我宁愿不要接触 Jquery
如果您有兴趣更多地学习 JavaScript，MooTools 是一个更真实的 javascript 库，它不会像 JQuery 那样严格地将您从 javascript 中抽象出来。 MooTools 是一个优秀的通用框架，它使用 javascript 来实现它的本质。以下站点可能有助于启发您了解 MooTools 是什么以及它可以为像您这样有抱负的 JavaScript 开发人员提供什么：jqueryvsmootools.com
jQuery 不会妨碍您熟悉核心 javascript。它只会让你远离糟糕的网络浏览器 DOM，我向你保证，它不是 javascript 的一部分。

【解决方案4】：

假设您希望按钮转到testdiv 容器的右上角，这就是您所需要的：

<style>
  #myButton {
    position: absolute;
  }

  #testdiv {
    height: 2em;
    position: relative;
    width:500px;
    border:solid #000000;
  }
</style>

请注意，您之前的 css 引用了类为 mybutton 的元素，而不是 id 为 myButton 的元素。 position: relative 为myButton 的绝对位置提供定位上下文。

<script>
  var button = document.getElementById('myButton');
  button.style.top = 0;
  button.style.right = 0;
</script>

您还应该注意，您的 x 和 y 在原始问题中被颠倒了——您在 y 轴上偏移了宽度，在 x 轴上偏移了高度。

还有html：

<body>
    <div id="testdiv">
            <input type="submit" id="myButton" value="TestMe">
    </div>
</body>

【讨论】：