Erzeugen einer zufälligen Position in einem div mit Javascript

Question

Ich bin auf der Suche nach einer Möglichkeit, eine zufällige Position auf meinem HTML div. Ich habe eine Javascript-Funktion geschaffen, die wie folgt aussieht:

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

ich durch Ändern einer beliebigen Position in der div css erzeugen wollte (position: relative; left: 0px; top: 0px) der linken und oberen Attribut zu der zufällig generierten Nummer. Ich kann nicht scheinen, einen maximalen & Minute Wert für die Funktion zu finden, da das div Prozentsätze für die Breiten benutzt.

css des div:

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

die Funktion ausführt, wenn ich eine bestimmte Schaltfläche klicken

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 

i Javascript gerade begonnen vor ein paar Tagen und kann nicht scheinen, einen Weg zu finden, es zu tun

Answer 1

Die Minima wären 0 und die Maxima wären die entsprechenden Breiten- und Höheneigenschaften des Elements. See here for an understanding of the different width properties.

Ich würde annehmen, Sie wollen element.outerWidth(true) und element.outerHeight(true).

Answer 2

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

Jetzt können Sie stagewidth & stage verwenden für Ihre Funktion aufruft

Answer 3

Verwendung clientWidth und clientHeight statt width und height

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

hier ist ein Unterschied zwischen clientHeight vs offsetHeight