使用简单的 JavaScript 重新定位按钮
[英]Reposition button with simple JavaScript
问题描述
我对 JavaScript 很陌生，只是第一次尝试学习。 作为一个小练习，我正在尝试做一些简单的事情。
我几乎是在尝试重新定位页面加载时的按钮。 我做错了什么？
我会很感激一些帮助。
我的代码如下：
<style type="text/css">
.mybutton{
position:absolute;
}
</style>
脚本：
<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>
编辑：我在萤火虫中遇到的错误是：
mytestbutton.style 未定义
4 个解决方案
解决方案1
5 已采纳 2009-07-22 02:02:00
使用 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");
解决方案2
4 2009-07-22 02:09:39
这里有几个问题。 首先，以下将不起作用：
document.getElementById("testdiv").childNodes()[0]
childNodes不是函数，而是一个类似数组的对象。 它应该像下面这样：
document.getElementById("testdiv").childNodes[0]
但是，这也不会做你想要的 - 因为testdiv中的第一个节点是一个文本节点（由许多空格字符组成）。 你可能想要这个：
document.getElementById("testdiv").childnodes[1]
但最简单的解决方案是：
document.getElementById("myButton")
其次，正如另一个答案中提到的，您需要在将 CSS 样式分配给对象时指定单位。
解决方案3
1 2009-07-22 02:07:10
我强烈建议使用其中一种优秀的免费 javascript 框架来处理此类事情。 MooTools、JQuery、Prototype 和许多其他工具可以大大简化从 javascript 动态设置 CSS 样式的过程，而无需担心古怪的事情，例如必须记住在位置值的末尾添加“px”等. MooTools 和 JQuery 等 Javascript 框架非常轻量级，但包含大量非常有用的功能，因此绝对值得研究：
// mootools
var el = $("myElement");
el.setStyle("left", 20);
el.setStyle("top", 10);
解决方案4
1 2009-07-22 02:20:54
假设您希望按钮转到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>
复位 <div> 用Javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.