Question

这是我第一次在这里发帖，所以我希望我做得对。我感谢任何帮助。

我正在尝试使用Javascript函数更新div的位置，当通过单击按钮调用时，它会计算随机数，然后使用这些数字来更改div的位置。不幸的是，单击按钮不会改变div的位置。

这是我的HTML：

<body>

<p>Want to see something cool?</p>
<button id = "funbutton" onclick="SeeWhatHappens()">Click here!</button>

<div id = "newdiv" class="a"></div>

</body>

这是我的Javascript功能：

function SeeWhatHappens() {
var numRand = Math.floor(Math.random() * 501);
var divsize = 50;
var posx = (Math.random() * document.width() - divsize).toFixed();
var posy = (Math.random() * document.height() - divsize).toFixed();
var div = document.getElementById('newdiv');
div.style.left = posx;
div.style.top = posy;
}

这是我的完整代码： http://jsfiddle.net/6hnLx6qc/

我做错了什么？

Answer 1

你有两个问题。第一个是width对象上没有height和document这样的方法。您可以改用window.innerWidth/innerHeight。第二个，您需要使用px单位作为style.left/top值：

function SeeWhatHappens() {
    var numRand = Math.floor(Math.random() * 501);
    var divsize = 50;
    var posx = (Math.random() * window.innerWidth - divsize).toFixed();
    var posy = (Math.random() * window.innerHeight - divsize).toFixed();
    var div = document.getElementById('newdiv');
    div.style.left = posx + 'px';
    div.style.top = posy + 'px';
}

演示： http://jsfiddle.net/6hnLx6qc/7/

Answer 2

获取文档的宽度和高度时遇到了一些问题。我将其切换为使用window.innerHeight和.innerWidth代替。

http://jsfiddle.net/6hnLx6qc/8/

如何用javascript更新div的位置

2 个答案: