需要一些简单的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

答

当设置位置使用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");

+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);

Mootools
JQuery
Prototype
Dojo Toolkit

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

答

假设你想要的按钮去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>

需要一些简单的JavaScript帮助

相关推荐