Question

我希望我的包含文本的div每次点击都会向右移动10px。

这是HTML：

<div id='color-div' style='clear:both; position:relative; left:0;'>&nbsp;</div>

脚本：

document.getElementById('color-div').style.right='10px';

我的活动已经定义，其他一切都正常运作。

Answer 1

要将div移到右侧，您应该添加到左侧，而不是
您需要在div中添加一个clickhandler。
您正在将样式设置为固定值，以增加它。

添加

onclick="moveRight()"

到您的div，并将您的javascript更改为：

var moveRight = function(){
    var current_offset = parseInt(document.getElementById('color-div').style.left);
    document.getElementById('color-div').style.left = current_offset + 10 + "px";
}

请在此处查看：jsFiddle

Answer 2

您可能想使用这个小javascript

<script language="javascript">
function example_animate(px) {
    $('#example').animate({
        'marginLeft' : px
    });
}
</script>
<input type="button" value="Move Right" onclick="example_animate('+=50px')" />

而不是在按钮单击时移动它，在div click事件上调用此函数。

Answer 3

使用jquery，您可以通过以下方式实现此目的： Example

HTML：

<div class="click-me"></div>

CSS：

.click-me {
    display:block;
    height:50px;
    width:50px;
    background:blue;    
    position:absolute;
}

Javascript：

$(document).ready(function() {
    $('.click-me').click(function() {
        $this = $(this);
        var currentLeft = $this.offset().left;
        $this.css("left", currentLeft + 10);      
    });
});

如何使用JavaScript移动HTML div？

3 个答案: