使用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>

Answer 2

我添加定位到你的代碼，我可以讓它按百分比移動。

<img id="randObject" width=100 height=100> 

<script> 
document.getElementById("randObject").onclick = function() { 
    var windowWidth = window.innerWidth; 
    var windowHeight = window.innerHeight; 
    var bColor = "#"+((1<<24)*Math.random()|0).toString(16); 
    var yAxis = Math.random() + '%'; 
    var xAxis = Math.random() + '%'; 

     document.getElementById("randObject").style.backgroundColor = bColor; 
     document.getElementById("randObject").style.top = yAxis; 
     document.getElementById("randObject").style.left = xAxis; 
     document.getElementById("randObject").style.position = 'absolute'; 
} 
</script>