javascript - 用JS修改CSS位置

Question

我正在使用 document.getElementById("").style.top = var;每次单击对象时随机更改对象的位置，但我只能按像素而不是百分比随机更改位置。我如何用 % 随机生成一个数字？

document.getElementById("randObject").onclick = function () {

    var bColor = "#"+((1<<24)*Math.random()|0).toString(16);
    var yAxis = Math.random()*100;
    var xAxis = Math.random()*100;      

        document.getElementById("randObject").style.backgroundColor = bColor;
        document.getElementById("randObject").style.top = yAxis;
        document.getElementById("randObject").style.left = xAxis;
}

Answer 1

document.getElementById("randObject").style.top = yAxis + "%";
document.getElementById("randObject").style.left = xAxis + "%";

我应该指出，您的颜色生成器也有 1/16 的时间无效。您需要对字符串进行左零填充:

"#" + ("00000" + ((1<<24) * Math.random() | 0).toString(16)).slice(-6);

另一个可以用来节省 DOM 查找时间的快捷方式是在点击事件中使用 this 关键字。总而言之，它看起来像:

最后，您可能会考虑使用 .addEventListener('click', function() { ... }) 因为这是当前的标准，尽管如果您真的这样做的话，您正在做的事情就没问题想支持IE6。

让我们看看这个演示，因为它现在看起来是一个非常简洁的脚本:

document.getElementById("randObject").addEventListener('click', function() {
  var bColor = "#" + ("00000" + ((1<<24) * Math.random() | 0).toString(16)).slice(-6);
  var yAxis = Math.random() * 100;
  var xAxis = Math.random() * 100;

  this.style.backgroundColor = bColor;
  this.style.top = yAxis + "%";
  this.style.left = xAxis + "%";
});

:root {
  /* change this value to update the size of playing field and #randObject */
  --size: 50px;
}

html {
  position: absolute;
  margin: 0 var(--size) var(--size) 0;
  padding: 0;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

body {
  margin: 0;
  padding: 0;
}

#randObject {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--size);
  height: var(--size);
  background-color: #000000;
  border-radius: 50%;
  cursor: pointer;
  transition-property: top, left, background-color;
  transition-duration: 0.4s;
}

<div id="randObject"></div>