使用javascript在div内生成随机位置答案

【问题标题】：generating a random position inside a div using javascript使用javascript在div内生成随机位置
【发布时间】：2018-03-31 07:31:56
【问题描述】：

我正在寻找一种在我的 html div 上生成随机位置的方法。我创建了一个如下所示的 javascript 函数：

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

我想在 div 的 css 中生成一个随机位置，方法是将 (position:relative; left:0px; top:0px) left 和 top 属性更改为随机生成的数字。我似乎找不到函数的最大值和最小值，因为 div 使用百分比作为宽度。

div的css：

#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，但似乎找不到方法

【问题讨论】：

那么问题是找不到div的宽度？

标签： javascript html css random

【解决方案1】：

使用clientWidth 和clientHeight 代替width 和height

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

这里是clientHeight vs offsetHeight的区别

【讨论】：

谢谢！它有效，但随机位置通常会在 div 之外更远并溢出

【解决方案2】：

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

现在您可以在函数调用中使用 stageWidth 和 stageHeight

【讨论】：

【解决方案3】：

最小值为 0，最大值为元素的适当宽度和高度属性。 See here for an understanding of the different width properties.

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

【讨论】：