如何使用JavaScript移動HTML div？

我希望我的包含文字的div每次點擊時向右移動10px。如何使用JavaScript移動HTML div？

下面是HTML：

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

和腳本：

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

我的事件已經被定義和其他一切工作，因爲它應該。

來源

2014-10-08 user2840682

您最好切換一個'class'，它的定義將'div'移動到正確的位置。 – xandercoded 2014-10-08 16:49:00

我沒有看到任何點擊處理程序代碼。 – j08691 2014-10-08 16:49:56

'right ='10px';'只是將'right'的值設置爲'10px'。你想**用'10'增加**其當前值*。 – 2014-10-08 16:50:59

到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

來源

2014-10-08 16:58:38

-1

你可能會想用這個小的JavaScript

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

而不是在按鈕點擊時移動它，在div點擊事件中調用此函數。

來源

2014-10-08 17:01:36

javascript被標記爲不是jquery – 2014-10-08 17:02:13

-1

使用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);  
    }); 
});

來源

2014-10-08 17:04:45

javascript被標記爲不是jquery – wadie 2014-10-08 17:05:39

如何使用JavaScript移動HTML div？

回答

相關問題