點擊右上方紅色按鈕關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！

大家好！我是/小鄭搞碼事/的小鄭

今天給大家分享JavaScript的基礎知識-改變元素的位置。

沒錯，用JS實現過動畫的同學都應該了解一點，簡單來說，動畫就是讓元素的位置隨著時間而不斷地發生變化。所以改動元素位置就成了第一步。

今天講解的例子，DOM結構及簡略樣式如下：

// 樣式

#message{

position: relative;

width:330px;

height:330px;

background:#eee;

}

#block{

width:20px;

height:20px;

background:red;

}

// dom結構

一、初始化dom位置

如果需要默認動態初始化DOM的位置，可以設置元素的style屬性。代碼如下：

在dom加載完成之后，直接運行這個函數就能初始化dom的位置。如

window.onload = positionMessage

當然，最好是封裝成一個函數來調用，方便有更多初始化的操作可以便利加入到這個函數中。那怎么封裝window.onload呢？ 看下面這段代碼：

這個函數將要完成如下操作：

把現有的window.onload事件處理函數的值存入變量oldonload。

如何在這個處理函數上還沒有綁定任何函數，就像平時那樣把新函數添加給它。

如何在這個處理函數上已經綁定了一些函數，就把函數追加到現有指令的末尾。

調用的時候就可以直接像下面這樣使用：

addLoadEvent(positionMessage)

二、改變dom位置

那么如何改變DOM的位置了？也就很簡單了，我斷續來寫一個控制元素移動的函數。

如下：

綜上所述，代碼調用如下：

addLoadEvent(moveMessage)

效果如下：其實是一個靜態的效果，因為我們還沒有加時間，時間遞增量等。

總結一下：

我們最終要實現的是一個可控的動畫函數，這些在接下來的篇幅中我會把代碼列出來，這些都是JS最基礎的知識點，好好復習和加強鞏固。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的js封装函数_JavaScript基础-如何封装函数来改变元素的位置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。