使用簡單的 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.