Question

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

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

我将不胜感激。

我的代码如下：

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

我非常简单的HTML：

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

修改我在furebug中遇到的错误是：

mytestbutton.style is undefined

Answer 1

使用CSS设置位置时，您需要指定正在使用的测量值...尝试此操作：

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

编辑：

当它应该是“#mybutton”时，你也有“.mybutton”。是指类，＃是指ID的

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

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

或者你可以去

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

Answer 2

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

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

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

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

然而，由于testdiv中的第一个节点是一个文本节点（由许多空格字符组成），因此不会做你想做的事情。你可能想要这个：

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

但最简单的解决方案是：

document.getElementById("myButton")

其次，如另一个答案所述，您需要在为对象分配CSS样式时指定单位。

Answer 3

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

// mootools

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

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

需要一些简单的JavaScript帮助

4 个答案: