Question

我有一些代码，当单击div但它不起作用时会移动“div”。

$(".shape").click(function() {
    var bodyHight = document.body.clientHeight;
    var bodyWidth = document.body.clientWidth;
    var randomX = Math.floor((Math.random() * bodyWidth));
    var randomY = Math.floor((Math.random() * bodyHeight));
    $(".shape").css("left", randomX);
    $(".shape").css("top", randomY);
});

和一些css：

.shape{
    border-radius: 50px;
    width: 10px;
    height: 10px;
    background-color: white;
    position: absolute;
    left: 50%;
    top: 50%;
}

任何人都可以帮助我吗？

Answer 1

像这样改变：

＆＃13;

$(document).ready(function(){
  $(".shape").click(function() {
    var bodyWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var bodyHight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    var randomX = Math.floor((Math.random() * bodyWidth));
    var randomY = Math.floor((Math.random() * bodyHight));
    $(".shape").css({top: randomY, left:randomX});
});
});

＆＃13;

.shape{
    border-radius: 50px;
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shape"></div>

＆＃13;

Answer 2

javascript片段第2行的“bodyHight”是一个错字。

此外，在大多数浏览器（例如Chrome）中，元素的默认高度取决于其内部元素。但是，这里使用绝对定位，这意味着所有都不在DOM流中，最终导致body的高度为0.因此div.shape只能在顶部1水平像素线上水平移动。

如何动态操作css以使div在单击div时移动？

2 个答案: