需要一些簡單的JavaScript幫助

我對JavaScript非常陌生，並且只做了我第一次嘗試學習。作爲一項小練習，我試圖做一些簡單的事情。需要一些簡單的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

來源

2009-07-22 Dmitris

當設置位置使用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");

來源

2009-07-22 02:02:00

+1提的空白文本節點 - 在不同瀏覽器之間的文本分析這種差異抓住了很多人了:-) – NickFitz 2009-07-22 11:09:28

我強烈建議使用優秀的免費的JavaScript框架之一，在那裏來處理這樣的事情。 MooTools，JQuery，Prototype和其他很多功能可以大大簡化從javascript動態設置CSS樣式的過程，而不需要關注諸如必須記住將「px」添加到位置值末尾等奇怪的事情。。喜歡Moot和JQuery JavaScript框架是非常輕巧，但包一噸的非常有用的功能，所以他們肯定是值得探討：

// mootools 

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

來源

2009-07-22 02:07:10 jrista

我preffer前不要我碰的Jquery熟悉核心JavaScript – Dmitris 2009-07-22 02:12:59

如果您有興趣進一步學習JavaScript，MooTools是一個更真實的JavaScript庫，它不會像JQuery那樣將您從JavaScript中抽象出來。 MooTools是一個優秀的通用框架，它使用JavaScript來表現它的功能。下面的網站可能會有助於您瞭解MooTools是什麼以及它可以爲您提供一個有抱負的JavaScript開發人員，比如您自己：http://jqueryvsmootools.com/ – jrista 2009-07-22 03:11:52

有幾個o這裏的問題。首先，以下將不起作用：

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

childNodes不是功能，但類似陣列的對象。它應該是這樣的：

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

不過，這不是你想要的任何事 - 爲testdiv的第一個節點是一個文本節點（包括一些空格字符）。你可能希望這樣的：

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

，但最簡單的辦法是這樣的：

document.getElementById("myButton")

其次，作爲在另一個答覆中提到，你需要指定CSS樣式對象時指定單位。

來源

2009-07-22 02:09:39 harto

假設你想要的按鈕去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被扭轉了原來的問題 - 你被抵消由寬度和由高度x軸，y軸。

和HTML：

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

來源

2009-07-22 02:20:54 wombleton

需要一些簡單的JavaScript幫助

回答

相關問題