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

Question

I am very new to JavaScript and making only my first attempts to learn.我对 JavaScript 很陌生，只是第一次尝试学习。 As a small exercise, I am trying to do something simple.作为一个小练习，我正在尝试做一些简单的事情。

Pretty much I am trying to reposition button that I have on page load.我几乎是在尝试重新定位页面加载时的按钮。 What do I do wrong?我做错了什么？

I would appreciate some help.我会很感激一些帮助。

My code is bellow:我的代码如下：

<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>

And my very simple html:还有我非常简单的 html：

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

Edit: The error I am getting in firebug is:编辑：我在萤火虫中遇到的错误是：

mytestbutton.style is undefined mytestbutton.style 未定义

Answer 1

When setting position with CSS you need to specify what measurement you are using... try this:使用 CSS 设置位置时，您需要指定您使用的是什么测量...试试这个：

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

EDIT:编辑：

Also, you have .mybutton when it should be #mybutton .另外，当它应该是#mybutton .mybutton . refers to classes and # refers to ID s.指的是类， #指的是ID 。

And finally .childNodes is not a function its a property so you don't need the () , plus you have whitespace so you need to either remove it or use .childNodes[1] instead of .childNodes[0] .最后.childNodes不是一个函数，它是一个属性，所以你不需要() ，加上你有空格，所以你需要删除它或使用.childNodes[1]而不是.childNodes[0] 。

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

Alternatively, you could just go或者，你可以去

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

Answer 2

There are a couple of problems here.这里有几个问题。 Firstly, the following won't work:首先，以下将不起作用：

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

childNodes is not function, but an array-like object. childNodes不是函数，而是一个类似数组的对象。 It should be like the following:它应该像下面这样：

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

However, that won't do what you want either - as the first node in testdiv is a text node (consisting of a number of space characters).但是，这也不会做你想要的 - 因为testdiv中的第一个节点是一个文本节点（由许多空格字符组成）。 You probably want this:你可能想要这个：

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

but the simplest solution is this:但最简单的解决方案是：

document.getElementById("myButton")

Secondly, as mentioned in another answer, you need to specify units when assigning CSS styles to an object.其次，正如另一个答案中提到的，您需要在将 CSS 样式分配给对象时指定单位。

Answer 3

I highly recommend using one of the excellent free javascript frameworks out there to handle things like this.我强烈建议使用其中一种优秀的免费 javascript 框架来处理此类事情。 MooTools, JQuery, Prototype, and many others can greatly simplify the process of dynamically setting CSS styles from javascript, without the need to concern yourself with quirky things like having to remember to tack on "px" to the end of your position values and such. MooTools、JQuery、Prototype 和许多其他工具可以大大简化从 javascript 动态设置 CSS 样式的过程，而无需担心古怪的事情，例如必须记住在位置值的末尾添加“px”等. Javascript frameworks like MooTools and JQuery are very lightweight, but pack a ton of very helpful functionality, so they are definitely worth looking into: MooTools 和 JQuery 等 Javascript 框架非常轻量级，但包含大量非常有用的功能，因此绝对值得研究：

// mootools

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

Answer 4

Assuming that you want the button to go to the top right of the testdiv container, this is what you need:假设您希望按钮转到testdiv容器的右上角，这就是您需要的：

<style>
  #myButton {
    position: absolute;
  }

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

Note that your previous css referred to an element with a class of mybutton instead of an element with the id myButton .请注意，您之前的 css 引用了具有mybutton类的元素，而不是具有 id myButton的元素。 The position: relative gives a positioning context to myButton 's absolute position. position: relative为myButton的绝对位置提供定位上下文。

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

You should also note that your x and y were reversed in the original question -- you were offsetting on the y axis by the width and on the x axis by the height.您还应该注意，您的x和y在原始问题中被颠倒了——您在 y 轴上偏移了宽度，在 x 轴上偏移了高度。

And the html:和 HTML：

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

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

问题描述

4 个解决方案

解决方案1
5 已采纳 2009-07-22 02:02:00

解决方案2
4 2009-07-22 02:09:39

解决方案3
1 2009-07-22 02:07:10

解决方案4
1 2009-07-22 02:20:54

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

问题描述

4 个解决方案

解决方案1 5 已采纳 2009-07-22 02:02:00

解决方案2 4 2009-07-22 02:09:39

解决方案3 1 2009-07-22 02:07:10

解决方案4 1 2009-07-22 02:20:54

解决方案1
5 已采纳 2009-07-22 02:02:00

解决方案2
4 2009-07-22 02:09:39

解决方案3
1 2009-07-22 02:07:10

解决方案4
1 2009-07-22 02:20:54