javascript – 如何防止元素超出其容器边界

我有一个正方形,点击时它出现在一个随机位置,它也会改变大小(例如,如果我有一个30px的盒子,但它距离左边界10px,我仍然在游戏空间外得到10px).

有时广场超过他的集装箱边界

我怎样才能确保广场永远不会超过他的容器？

function position() {
  var positionTop = Math.random() * 100;
  var positionLeft = Math.random() * 100;
  var position = "position:relative;top:" + positionTop + "%;left:" + positionLeft + "%;"
  return position;
}

document.getElementById("shape").onclick = function() {
  document.getElementById("shape").style.cssText = position();
}

#gameSpace {
  width: 100%;
  height: 470px;
  background: blue;
  margin: 0;
  padding-top: 30px;
}

#playSpace {
  width: 90%;
  height: 90%;
  margin: 0 auto;
  margin-top: 10px;
  border: 1px black solid;
}

#shape {
  width: 100px;
  height: 100px;
  background-color: red;
}

<div id="gameSpace">
  <div id="playSpace">
    <!-- here we put the shape -->
    <div id="shape"></div>
  </div>
</div>

解决方法

你需要设置位置：相对;到父元素和位置：绝对;到形状元素.然后使用max min值随机,其中max是父宽度/高度,并减去形状宽度/高度…

这是更新前的片段

function position() {
  var playSpace = document.querySelector('#playSpace');
  var shape = document.getElementById("shape");
  var maxHeight = playSpace.offsetHeight - shape.offsetHeight;
  var maxWidth = playSpace.offsetWidth - shape.offsetWidth;

  var positionTop = Math.random() * (maxHeight - 0) + 0;
  var positionLeft = Math.random() * (maxWidth - 0) + 0;

  // think of this like so:
  // var positionTop = Math.random() * (max - min) + min;
  // more information about it https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

  var position = "position:absolute;top:" + positionTop + "px;left:" + positionLeft + "px;"
  return position;
}

document.getElementById("shape").onclick = function() {
    document.getElementById("shape").style.cssText = position();
}

#gameSpace {
  width: 100%;
  height: 470px;
  background: blue;
  margin:0;
  padding-top: 30px;
}


#playSpace {
  position: relative; /* add this line */
  width: 90%;
  height: 90%;
  margin: 0 auto;
  border: 1px black solid;
}

#shape {
  width: 100px;
  height: 100px;
  background-color: red; 
}

<div id="gameSpace">
    <div id="playSpace">
        <!-- here we put the shape -->
        <div id="shape"></div>
    </div>
</div>

评论后更新
不知道你是如何添加size()函数但可能是使用… cssText覆盖了更改的问题.所以现在我通过将元素传递给函数来更改代码,然后只更改需要更改的单个CSS语句.

function position(element) {
  var playSpace = document.querySelector('#playSpace');
  var shape = document.getElementById("shape");
  var maxHeight = playSpace.offsetHeight - shape.offsetHeight;
  var maxWidth = playSpace.offsetWidth - shape.offsetWidth;

  var positionTop = Math.random() * (maxHeight - 0) + 0;
  var positionLeft = Math.random() * (maxWidth - 0) + 0;

  // think of this like so:
  // var positionTop = Math.random() * (max - min) + min;
  // more information about it https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

  element.style.position = 'absolute';
  element.style.top = positionTop + "px";
  element.style.left = positionLeft + "px";
}

function size(element) {
  var sizeMath = (Math.random() * 200) + 50;
  element.style.width = sizeMath + "px";
  element.style.height = sizeMath + "px";
}

document.getElementById("shape").onclick = function() {
    size(document.getElementById("shape"));
    position(document.getElementById("shape"));
}

#gameSpace {
width: 100%;
height: 470px;
background: blue;
margin:0;
padding-top: 30px;
}


#playSpace {
position: relative; /* add this line */
width: 90%;
height: 90%;
margin: 0 auto;
border: 1px black solid;
}

#shape {
width: 100px;
height: 100px;
background-color: red; 
}

<div id="gameSpace">
    <div id="playSpace">
        <!-- here we put the shape -->
        <div id="shape"></div>
    </div>
</div>

javascript – 如何防止元素超出其容器边界

解决方法

猜你在找的JavaScript相关文章