如何用Javascript更改div位置？

所以，在這裏就是我這麼遠：https://jsfiddle.net/625qofbe/1/如何用Javascript更改div位置？

我想是的「關於」分區的位置，含Lorem存有文字和什麼應該是一個「X」符號（我不知道怎麼樣將圖像鏈接到JSfiddle，抱歉），當用戶點擊左上角的「關於」按鈕時，向左移動30像素。下面是我一直在努力做的是使用JavaScript：

document.getElementById("button").addEventListener("click", AboutOnScreen); 

function AboutOnScreen() { 
    document.getElementById("about").style.left = 30px; 
}

我一直在谷歌搜索和對成功的小實驗檢查的Javascript這樣的年齡，但什麼也沒有工作，我什麼也看不見我在這裏做錯了。

最終目標是讓Lorem文本隱藏在屏幕外，當用戶單擊About時滑入，然後在他們單擊X圖標後滑出屏幕。我確信我理論上知道那是怎麼回事，但我在第一步遇到了困難。

編輯：感謝您的幫助球員，但奇怪的是兩個解決方案，JSfiddle工作正常甚至當我複製/粘貼代碼回Sublime文本工作。但是，我確實通過刪除「addEventListener」行並將「onclick ='AboutOnScreen（）'」添加到About按鈕的div標記中，從而實現了工作。當我檢查頁面源代碼（如Arindam建議的）時，「addEventListener」這一行發送了一個錯誤通知，所以我完全擺脫了它。奇怪的是我確信我之前沒有成功嘗試過，所以解決這個頭痛的問題竟然是下面所有答案的綜合。

來源

2016-06-11 Evan

使用適當逗號...'左= '30像素' 的字符串;'而不僅僅是'左= 30像素;' – Rikard

@Rikard：這是值得注意的是，這些都是引號（'''），而不是逗號（'，'）。 –

不要自己建立這個。使用jquery。 – Gregg

正如@Rikard提到的，請執行下列操作：

document.getElementById("button").addEventListener("click", AboutOnScreen); 

function AboutOnScreen() { 
    document.getElementById("about").style.left = '30px'; 
}

哪些應該得到的片段工作。至於滑動動畫，您可以使用CSS3（假設瀏覽器支持）爲您的頁面快速添加動畫。

對於CSS3動畫一個很好的資源是http://www.w3schools.com/css/css3_animations.asp

祝你好運，玩得開心！

來源

2016-06-11 13:23:03 Arindam

因此，當我在JSfiddle中執行它們時，您的答案和zer00ne的答案都完全正常（謝謝），但是當我在Sublime Text中嘗試它們時，我仍然沒有任何結果。我甚至將JSfiddle中的所有內容複製/粘貼到Sublime Text文檔中，並在Safari和Google Chrome上運行該頁面。我認爲存在一個問題，那就是我不小心製作了2個版本的文件，但我可以在沒有問題的情況下進行其他可見的更改。 – Evan

您可能需要使用Ctrl + F5重新加載網頁。要檢查更改是否已保存並傳播，只需在網頁上右鍵單擊+ view-source並驗證編輯器更改是否已傳播。 – Arindam

當在純JS中設置元素距離值的內聯樣式時，它是Number和String或String的組合。所以值可以是：'430px'或430+'px'。

document.getElementById("button").addEventListener("click", AboutOnScreen); 

function AboutOnScreen() { 
    document.getElementById("about").style.left = 430 + 'px'; 
}

您可以通過30像素，這被解釋（至少對我來說），爲30PX從元件當前位於表示向左移動。所以它是left: 400px，所以如果將30px向左移動，值應該爲430px。

FIDDLE

來源

2016-06-11 13:26:19 zer00ne

如何用Javascript更改div位置？

回答

相關問題