前面介紹了offset偏移client可視區(qū)scroll滾動(dòng),這三部分主要從屬性的角度來(lái)對(duì)元素尺寸信息進(jìn)行獲取和修改。本文主要介紹元素視圖的三個(gè)方法,包括getBoundingClientRect()、getClientRects()和elementFromPoint()

 

getBoundingClientRect()

  判斷一個(gè)元素的尺寸和位置是簡(jiǎn)單的方法就是使用getBoundingClientRect()

  Element.getBoundingClientRect()方法返回一個(gè)對(duì)象,該對(duì)象提供當(dāng)前元素節(jié)點(diǎn)的大小、它相對(duì)于視口(viewport)的位置等信息。但是,各個(gè)瀏覽器返回的對(duì)象包含的屬性不相同

firefox: top left right bottom width height x y(其中,x=left,y=top)
chrome/safari/IE9+:top left right bottom width height
IE8-:  top left right bottom

  問(wèn)題來(lái)了,該方法返回的width和height是可視寬高client,還是滾動(dòng)寬高scroll,或者是偏移寬高offset,或者是設(shè)置寬高呢

平面設(shè)計(jì)培訓(xùn),網(wǎng)頁(yè)設(shè)計(jì)培訓(xùn),美工培訓(xùn),游戲開(kāi)發(fā),動(dòng)畫(huà)培訓(xùn)

<div id=&