需要一些简单的JavaScript帮助

I am very new to the JavaScript, and making only my first attempts to learn. As a small exercise I am trying to so something simple.

我是JavaScript的新手,只是我第一次尝试学习。作为一个小练习,我试着这么简单。

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

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 furebug is:

编辑:我在furebug中遇到的错误是:

mytestbutton.style is undefined

4 个解决方案

#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" . refers to classes and # refers to ID's

当它应该是“#mybutton”时,你也有“.mybutton”。是指类,#是指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");

#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. It should be like the following:

childNodes不是函数,而是类似数组的对象。它应该如下:

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). You probably want this:

但是,这也不会做你想要的 - 因为testdiv中的第一个节点是一个文本节点(由许多空格字符组成)。你可能想要这个:

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样式时指定单位。

#3

I highly recommend using one of the excellent free javascript frameworks out there to handle things like this. 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. Javascript frameworks like MooTools and JQuery are very lightweight, but pack a ton of very helpful functionality, so they are definitely worth looking into:

我强烈建议使用其中一个优秀的免费JavaScript框架来处理这样的事情。 MooTools,JQuery,Prototype和许多其他人可以大大简化从javascript动态设置CSS样式的过程,而不需要关心自己的奇怪事情,比如必须记住在你的位置值的末尾加上“px”等等。。像MooTools和JQuery这样的Javascript框架非常轻量级,但包含了大量非常有用的功能,所以它们绝对值得研究:

// mootools

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

#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. The position: relative gives a positioning context to myButton's absolute position.

请注意,您之前的css引用了一个带有mybutton类的元素,而不是一个id为myButton的元素。 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>

#1