如何用 javascript 更新 div 的位置

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

你有两个问题。第一个是 document 对象上没有 width 和 height 这样的方法。您可以改用 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 的位置

How to update position of div with javascript

html

javascript

position