一、直接獲取元素樣式屬性值 – element.style.width

console.log(div.style.width); // 500px console.log(parseInt(div.style.width)); // 500 console.log(typeof (div.style.width)); // string

二、Offset 偏移量

offsetWidth = width + padding + border
offsetHeight = height + padding + border

console.log(div.offsetWidth); // 560 (500 + 20 + 20 + 10 + 10) console.log(typeof (div.offsetWidth)); // number

offsetLeft : 當(dāng)前元素相對(duì)于其定位父元素的水平偏移量
offsetTop : 當(dāng)前元素相對(duì)于其定位父元素的垂直偏移量

在父盒子有定位的情況下，offsetLeft == parseInt(style.left)。注意：后者只識(shí)別行內(nèi)樣式！！！

三、offsetParent ：獲取當(dāng)前元素的定位父元素

如果當(dāng)前元素的父元素，有CSS定位那么 offsetParent 獲取的是最近的那個(gè)父元素

如果當(dāng)前元素的父元素，沒(méi)有CSS定位，那么 offsetParent 獲取的是 body。

注意：fixed 的父級(jí)是窗口，返回值是 null

四、offsetLeft 和 style.left 區(qū)別

offsetLeft 可以返回?zé)o定位父元素的偏移量。如果父元素中沒(méi)有定位，則以 body 為準(zhǔn)。

style.left 只能獲取行內(nèi)樣式，如果父元素中都沒(méi)有設(shè)置定位，則返回空字符串。

offsetTop 返回的是數(shù)字，而 style.top 返回的是字符串，而且還帶有單位px

div.offsetLeft = 100; div.style.left = '100px';

offsetLeft 和 offsetTop 只讀，而 style.left 和 style.top 可讀可寫(xiě)

總結(jié)：一般用 offsetLeft 和 offsetTop 獲取值，用 style.left 和 style.top 賦值

• style.left: 只能獲取行內(nèi)樣式，獲取的值可能為空，容易出現(xiàn) NaN
• offsetLeft: 獲取值特別方便，而且是現(xiàn)成的 number ,計(jì)算比較方便。它只是讀的，不能賦值。

三、Client

clientWidth : 獲取元素的可見(jiàn)寬度（width + padding）
clientHeight : 獲取元素的可見(jiàn)高度（height + padding）

注意：

clientWidth 和 clientHeight 屬性是只讀的，不可修改
clientWidth 和 clientHeight 的值都是不帶 px 的，返回的都是一個(gè)數(shù)字，可以直接進(jìn)行計(jì)算。

console.log(div.clientWidth); // 540 (500 + 20 + 20) console.log(typeof (div.clientWidth)); // number

但是加了滾動(dòng)條就不一樣了，PC 端瀏覽器滾動(dòng)條的默認(rèn)大小為 17px

console.log(div.clientWidth); // 523 (540 - 17)

clientLeft 和 clientTop

實(shí)際上就是盒子上的 border 寬度

console.log(typeof (div.clientLeft) + ':' + div.clientLeft); // number : 10

event 的 clientX 和 clientY

• e.clientX : 鼠標(biāo)距離可視區(qū)域左側(cè)距離。
• e.clientY : 鼠標(biāo)距離可視區(qū)域上側(cè)距離。

四、Scroll 滾動(dòng)

window.onscroll() 方法

當(dāng)鼠標(biāo)滾輪滾動(dòng)網(wǎng)頁(yè)的時(shí)候，會(huì)觸發(fā) window.onscroll() 方法。所以可以用來(lái)做滾動(dòng)監(jiān)聽(tīng)。

加上滾動(dòng)條之后

console.log(div.scrollWidth); // 523

scrollTop : 獲取垂直方向上滾動(dòng)的距離
scrollLeft : 獲取水平方向上滾動(dòng)的距離

注意：

當(dāng)某個(gè)元素滿足 scrollHeight - scrollTop === clientHeight 時(shí)，說(shuō)明垂直滾動(dòng)條到底了。

當(dāng)某個(gè)元素滿足 scrollWidth - scrollLeft === clientWidth 時(shí)，說(shuō)明水平滾動(dòng)條到底了。

上面兩個(gè)可以用來(lái)判斷用戶是否滑到底了，如果滑到底了，才進(jìn)行接下來(lái)的表單操作

除了 style , crollTop , scrollLeft 是可讀的，其他都是只讀

五、獲取 html 文檔的方式

獲取 html / head / title / body 標(biāo)簽的方法如下：

• document.documentElement — 獲取 html 標(biāo)簽
• document.head — 獲取 head 標(biāo)簽
• document.title — 獲取網(wǎng)頁(yè)標(biāo)題
• document.body — 獲取 body 標(biāo)簽

document.documentElement 表示文檔的 html 標(biāo)簽。也即是說(shuō)，基本結(jié)構(gòu)當(dāng)中的 html 標(biāo)簽是通過(guò) document.documentElement 訪問(wèn)的，并不是通過(guò) document.html 去訪問(wèn)的。

六、offset / scroll / client 的區(qū)別

• offsetWidth = width + padding + border
• offsetHeight = height + padding + border
• scrollWidth = 內(nèi)容寬度（不包含 border）
• scrollHeight = 內(nèi)容高度（不包含 border）
• clientWidth = width + padding
• clientHeight = height + padding

offsetTop / offsetLeft:

• 調(diào)用者：任意元素。（盒子為主）
• 作用：距離父級(jí)盒子中帶有定位的距離

scrollTop / scrollLeft：

• 調(diào)用者：document.body.scrollTop（window調(diào)用）（盒子也可以調(diào)用，但必須有滾動(dòng)條）
• 作用：瀏覽器無(wú)法顯示的部分（被卷去的部分）

clientY / clientX：

調(diào)用者：event

作用：鼠標(biāo)距離瀏覽器可視區(qū)域的距離（左、上）

總結(jié)

以上是生活随笔為你收集整理的获取元素大小和位置的方式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。