成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JS 中的offset、scroll、client總結(jié)

The question / 2687人閱讀

摘要：兩張圖鎮(zhèn)樓，隨時(shí)翻閱指偏移，包括這個(gè)元素在文檔中占用的所有顯示寬度，包括滾動(dòng)條，不包括隱藏的部分屬性返回一個(gè)對(duì)象的引用，這個(gè)對(duì)象是距離調(diào)用的父級(jí)元素中最近的在包含層次中最靠近的，并且是已進(jìn)行過定位的容器元素。

經(jīng)常碰到offset、scroll、client這幾個(gè)關(guān)鍵字，每次都要各種實(shí)驗(yàn)，這里總結(jié)一下。

兩張圖鎮(zhèn)樓，隨時(shí)翻閱

1. offset

offset 指偏移，包括這個(gè)元素在文檔中占用的所有顯示寬度，包括滾動(dòng)條、padding、border，不包括overflow隱藏的部分

offsetParent屬性返回一個(gè)對(duì)象的引用，這個(gè)對(duì)象是距離調(diào)用offsetParent的父級(jí)元素中最近的（在包含層次中最靠近的），并且是已進(jìn)行過CSS定位的容器元素。 如果這個(gè)容器元素未進(jìn)行CSS定位, 則offsetParent屬性的取值為根元素的引用。

如果當(dāng)前元素的父級(jí)元素中沒有進(jìn)行CSS定位（position為absolute/relative），offsetParent為body

如果當(dāng)前元素的父級(jí)元素中有CSS定位（position為absolute/relative），offsetParent取父級(jí)中最近的元素

obj.offsetWidth 指 obj 控件自身的絕對(duì)寬度，不包括因 overflow 而未顯示的部分，也就是其實(shí)際占據(jù)的寬度，整型，單位：像素。
offsetWidth = border-width*2+padding-left+width+padding-right

obj.offsetHeight 指 obj 控件自身的絕對(duì)高度，不包括因 overflow 而未顯示的部分，也就是其實(shí)際占據(jù)的高度，整型，單位：像素。
offsetHeight = border-width*2+padding-top+height+padding-bottom

obj.offsetTop 指 obj 相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算上側(cè)位置，整型，單位：像素。
offsetTop= offsetParent的padding-top + 中間元素的offsetHeight + 當(dāng)前元素的margin-top

obj.offsetLeft 指 obj 相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置，整型，單位：像素。
offsetLeft= offsetParent的padding-left + 中間元素的offsetWidth + 當(dāng)前元素的margin-left

2. scroll

scroll指滾動(dòng)，包括這個(gè)元素沒顯示出來的實(shí)際寬度，包括padding，不包括滾動(dòng)條、border

scrollHeight 獲取對(duì)象的滾動(dòng)高度，對(duì)象的實(shí)際高度；

scrollLeft 設(shè)置或獲取位于對(duì)象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離

scrollTop 設(shè)置或獲取位于對(duì)象最頂端和窗口中可見內(nèi)容的最頂端之間的距離

scrollWidth 獲取對(duì)象的滾動(dòng)寬度

3. client

client指元素本身的可視內(nèi)容，不包括overflow被折疊起來的部分，不包括滾動(dòng)條、border，包括padding

clientWidth 對(duì)象可見的寬度，不包括滾動(dòng)條等邊線，會(huì)隨窗口的顯示大小改變

clientHeight 對(duì)象可見的高度

clientTop、clientLeft 這兩個(gè)返回的是元素周圍邊框的厚度，一般它的值就是0。因?yàn)闈L動(dòng)條不會(huì)出現(xiàn)在頂部或者左側(cè)

網(wǎng)上的帖子大多深淺不一，甚至有些前后矛盾，在下的文章都是學(xué)習(xí)過程中的總結(jié)，如果發(fā)現(xiàn)錯(cuò)誤，歡迎留言指出~

參考：



javascript的offset、client、scroll的總結(jié)筆記


輕松弄清JavaScript中的offset、scroll、client


offset client scroll screen 關(guān)鍵字整理

PS：歡迎大家關(guān)注我的公眾號(hào)【前端下午茶】，一起加油吧~

另外可以加入「前端下午茶交流群」微信群，長(zhǎng)按識(shí)別下面二維碼即可加我好友，備注加群，我拉你入群～

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96805.html

相關(guān)文章

  • JS 中的offset、scroll、client總結(jié)

    摘要：兩張圖鎮(zhèn)樓，隨時(shí)翻閱指偏移，包括這個(gè)元素在文檔中占用的所有顯示寬度，包括滾動(dòng)條，不包括隱藏的部分屬性返回一個(gè)對(duì)象的引用，這個(gè)對(duì)象是距離調(diào)用的父級(jí)元素中最近的在包含層次中最靠近的，并且是已進(jìn)行過定位的容器元素。 經(jīng)常碰到offset、scroll、client這幾個(gè)關(guān)鍵字，每次都要各種實(shí)驗(yàn)，這里總結(jié)一下。 兩張圖鎮(zhèn)樓，隨時(shí)翻閱 showImg(https://segmentfault.c...

    jerryloveemily 評(píng)論0 收藏0

  • JS寬高（client、offset、scroll）的介紹

    摘要：?jiǎn)栴}今日頭條的一道筆試題，的區(qū)別。結(jié)果如圖更詳細(xì)的介紹，請(qǐng)點(diǎn)擊 問題 今日頭條的一道筆試題，offsetWidth、clientWidth、scrollWidth的區(qū)別。 分析 JS中document對(duì)象的寬高有三種，cilent、offset、scroll client： clientWidth和clientHeight，clientTop和clientLeft clientWidt...

    mj 評(píng)論0 收藏0

  • 容易混淆的client-*,scroll-*,offset-*

    摘要：容易混淆上來不說話，先拋出幾個(gè)問題是時(shí)候談?wù)勊鼈冎g的區(qū)別了，是不是已經(jīng)混亂了好吧，一步一步來搞清楚這些東西是啥。要搞清這幾個(gè)容易混淆的概念，我的建議是運(yùn)行文章中的例子。和類似于和，不同的是不包含邊框大小。 容易混淆client-*,scroll-*,offset-* Truth comes from practice 上來不說話，先拋出幾個(gè)問題： offsetWidth offs...

    Jokcy 評(píng)論0 收藏0

  • 容易混淆的client-*,scroll-*,offset-*

    摘要：容易混淆上來不說話，先拋出幾個(gè)問題是時(shí)候談?wù)勊鼈冎g的區(qū)別了，是不是已經(jīng)混亂了好吧，一步一步來搞清楚這些東西是啥。要搞清這幾個(gè)容易混淆的概念，我的建議是運(yùn)行文章中的例子。和類似于和，不同的是不包含邊框大小。 容易混淆client-*,scroll-*,offset-* Truth comes from practice 上來不說話，先拋出幾個(gè)問題： offsetWidth offs...

    tolerious 評(píng)論0 收藏0

  • JavaScript中的各種寬高屬性

    摘要：在中，存在著多的關(guān)于高度和寬度的屬性，比如等等這么多，傻傻分不清也正常啊。第二問題對(duì)象的屬性引用的是對(duì)象，表示該窗口中當(dāng)前顯示文檔的。如果出現(xiàn)滾動(dòng)條，滾動(dòng)條會(huì)遮蓋元素的寬高，那么該屬性就是其本來寬高減去滾動(dòng)條的寬高。 在js中，存在著N多的關(guān)于高度和寬度的屬性，比如：clientHeight、offsetHeight、scrollHeight、availHeight、scrollLef...

    wangbinke 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<