使用javascript生成div內的隨機位置

Question

我正在尋找一種方法來生成我的html div上的隨機位置。我創建了一個JavaScript函數，它看起來像這樣：

function randomInRange(min, max) { 
    return(Math.floor((Math.random() * (max - min) + 1) + min));  
} 

我想通過改變來產生div的CSS的隨機位置（位置：親屬;左：0像素;頂：0像素）的左側和頂部屬性到隨機生成的數字。我似乎無法找到該函數的最小值，因爲div使用寬度的百分比。

CSS的div：

#stage { 
    float: left; 
    background-color: pink; 
    width: 100%; 
    height: 70%; 
} 

函數執行當我點擊某個按鈕

var button = document.getElementById("button"); 

button.onclick = function() { 
    shape.style.left = randominrange(0, stage.style.width); 
    shape.style.top = randominrange(0, stage.style.height); 
} 
//the shape is a circle div that shows where the generated point is 

我剛開始的JavaScript前幾天和不能似乎找到一個方法來做到這一點

Answer 1

最小值爲0，最大值爲元素的寬度和高度屬性。 See here for an understanding of the different width properties。

我假設你想要element.outerWidth(true)和element.outerHeight(true)。

Answer 2

var stage = document.getElementById('stage'); 
var stageWidth = stage.offsetWidth; 
var stageHeight = stage.offsetHeight 

現在你可以使用stageWidth & stageHeight爲你的函數調用

Answer 3

使用clientWidth和width和height

button.onclick = function() { 
    shape.style.left = randominrange(0, stage.style.clientWidth); 
    shape.style.top = randominrange(0, stage.style.clientHeight); 
} 

這裏clientHeight反而是clientHeight vs offsetHeight