記錄學習前端知識的旅程 2

2021-10-08 03:21:20 字數 1026 閱讀 4652

又是新的一天到來,每天學習一點前端小知識。

今天學習了幾個關於pc端特效的屬性。

1、offset系列屬性

offsetleft  可以動態獲取元素距離父元素左邊框的偏移量。//父元素需帶有定位,如果父元素沒有定位則相對於body偏移

offsettop 可以動態獲取元素距離父元素上邊框的偏移量。//父元素需帶有定位,如果父元素沒有定位則相對於body偏移

offsetwidth  獲取自身的寬度包括padding、border、內容,返回值不帶單位。

offsetheight  獲取自身的高度包括padding、border、內容,返回值不帶單位。

2、client系列屬性

clientleft   獲取自身的左邊框大小

clienttop  獲取自身的上邊框大小

clientwidth     與offsetwidth的區別 :獲取自身寬度不包含邊框,返回值不帶單位。

clientheight   與offsetwidth的區別 :獲取自身寬度不包含邊框,返回值不帶單位。

3、scroll系列屬性

scrollheight  獲取元素的實際高度大小(內容的大小),不包含邊框

scrollwidth  獲取元素的實際寬度大小(內容的大小),不包含邊框

scrolltop 獲取元素頂部被卷去的距離

用了這幾個屬性做了乙個小案例,滑鼠移上去,右邊會出現放大的效果

中間的小黃框會跟著滑鼠移動,右邊的也會跟著滑鼠移動。

補充:e.pagex獲取滑鼠距離頁面左邊的大小   //相對於頁面,不是遊覽器視窗

e.pagey獲取滑鼠距離頁面頂部的大小   相對於頁面,不是遊覽器視窗

哈哈,好了,今天就寫到這吧

前端基礎知識學習記錄(三)

前端基礎知識學習記錄 三 1.css 選擇器的使用 1 before與 after選擇器的簡介 before選擇器,即為在被選元素的內容前面插入內容,使用 content 屬性來指定要插入的內容。after選擇器,即為在被選元素的內容後面插入內容,同樣使用 content 屬性來指定要插入的內容。2...

前端學習記錄

總結一下這幾天跟前輩學的新知識 1.吸頂效果,普通的做法是在onscroll函式中監聽滾動距離,如果滾動超過導航條高度,則將導航條的class新增.fixed。但是ios6 裝置下的瀏覽器會在頁面滾動的時候暫停所有js的執行,包括settimeout和setinterval,onscroll也不會執...

web前端知識2

jquery 常用方法 ajax jquery中,d ocum ent rea dy 是什麼意 思?和w indo w.on load 的區別?還有其他 什麼寫法 或者替代 方法?document ready html結構已完全載入時,指令碼就可以執行。window.onload 直到所有的東西都載...