如何用javascript更新div的位置_Javascript_Html_Position

如何用javascript更新div的位置

javascript html

如何用javascript更新div的位置,javascript,html,position,Javascript,Html,Position,这是我第一次在这里发帖，所以我希望我做得对。我很感激能得到的任何帮助我试图使用Javascript函数更新div的位置，当通过单击按钮调用该函数时，该函数计算随机数，然后使用这些数字更改div的位置。不幸的是，单击按钮不会更改div的位置这是我的HTML： <body> <p>Want to see something cool?</p> <button id = "funbutton" onclick="SeeWhatHappens()">

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

我试图使用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>

这是我的全部代码：

我做错了什么？你有两个问题。第一个是在

文档

对象上没有这样的方法

宽度

和

高度

。您可以改为使用

window.innerWidth/innerHeight

。第二个，您需要使用

px

单位来表示

样式。左/上

值：

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';
}

演示：您在获取文档的宽度和高度时遇到了一些问题。我把它改为使用

window.innerHeight

和

.innerWidth

首先，您需要使用div的绝对定位来控制其左侧和顶部位置。这可能是唯一的问题。非常感谢！这很有道理。

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';
}