小編給大家分享一下JavaScript獲取元素尺寸的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)公司專(zhuān)業(yè)為企業(yè)提供恩施土家網(wǎng)站建設(shè)、恩施土家做網(wǎng)站、恩施土家網(wǎng)站設(shè)計(jì)、恩施土家網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、恩施土家企業(yè)網(wǎng)站模板建站服務(wù)，10年恩施土家做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

HTML尺寸

所謂元素的HTML尺寸，就是指在HTML標(biāo)簽中設(shè)置的尺寸樣式。

例如：

<p class="box" style="width: 200px; height: 200px;"></p>復(fù)制代碼

頁(yè)面效果如下圖所示：

這種尺寸可以通過(guò)elem.style.width或elem.style.height獲取

例如：

let box = document.querySelector('.box');console.log(box.style.width); // 200pxconsole.log(box.style.heihgt); // 200px復(fù)制代碼

但是對(duì)于CSS尺寸，它們是無(wú)法獲取的。

例如：

.box {    width: 200px;    height: 200px;    background: lightpink;
}復(fù)制代碼

如下圖所示：

為了讓樣式和結(jié)構(gòu)分離，我們會(huì)將樣式單獨(dú)寫(xiě)進(jìn)CSS文件中，如果上述方法無(wú)法獲取元素的尺寸，那我們?cè)撏ㄟ^(guò)什么方法如何獲取呢？

接著往下看。

在JavaScript的element對(duì)象中，提供了三種只讀屬性，可以用于獲取元素的尺寸。

它們分別是：

• offsetHeight和offsetWidth
• clientHeight和clientWidth
• scrollHeight和scrollWidth

我們先從第一種開(kāi)始

offsetHeight和offsetWidth

offsetHeight用于獲取元素的真實(shí)高度（border-box），它包含該元素的垂直內(nèi)邊距和邊框，如果有水平滾動(dòng)條的話(huà)（水平滾動(dòng)條高度為17px，一般會(huì)被計(jì)入內(nèi)容高度height中），還需要加上水平滾動(dòng)條的高度。

offsetWidth用于獲取元素的真實(shí)寬度（border-box），它包含該元素的水平內(nèi)邊距和邊框，如果有垂直滾動(dòng)條的話(huà)（水平滾動(dòng)條高度為17px，一般會(huì)被計(jì)入內(nèi)容寬度width中），還需要加上垂直滾動(dòng)條的寬度。

沒(méi)有滾動(dòng)條時(shí)

一個(gè)p元素有如下樣式

.box {    margin: 10px auto;    padding: 10px;    width: 200px;    height: 200px;    border: 1px solid #000;    background: lightpink;
}復(fù)制代碼

頁(yè)面效果如下：

其盒模型如下所示：

由于offsetHeight獲取的是元素的真實(shí)高度，那么其高度為height+ padding * 2 + border * 2，即200px+10px * 2+1px * 2，為222px

offsetWidth獲取的是元素的真實(shí)寬度，那么其寬度為width+padding * 2+border * 2，即200px+10px * 2+1px * 2，為222px

let box = document.querySelector('.box');let height = box.offsetHeight;let width = box.offsetWidth;console.log(height); // 222pxconsoel.log(width); // 222px復(fù)制代碼

含有滾動(dòng)條時(shí)

當(dāng)含有滾動(dòng)條時(shí)，由于水平滾動(dòng)條的高度為17px，一般會(huì)被計(jì)入內(nèi)容高度height中，即內(nèi)容高度的實(shí)際值要比設(shè)置的值要少17px。

兩個(gè)p為父子關(guān)系，它們有如下樣式：

.father {    margin: 10px auto;    padding: 10px;    width: 200px;    height: 200px;    border: 1px solid;    background: lightsalmon;    /* 滾動(dòng)條高度和寬度被計(jì)算到content中 */
    overflow: auto;
}.son {    width: 220px;    height: 220px;    background: plum;
}復(fù)制代碼

頁(yè)面效果如下：

其盒模型如下所示：

可以看到，內(nèi)容區(qū)域的寬度實(shí)際有效值為183px，是設(shè)置的width值減去了垂直滾動(dòng)條的寬度17px后的值。內(nèi)容區(qū)域的高度亦是如此。

但當(dāng)有滾動(dòng)條時(shí)，由于offsetHeight和offsetWidth的值除了內(nèi)邊距和邊框值外，還需要包含滾動(dòng)條的高度和寬度。雖然滾動(dòng)條占據(jù)了內(nèi)容區(qū)域的width和height部分空間，但是，最終計(jì)算時(shí)，又加上了。

所以真實(shí)寬度還是相當(dāng)于原來(lái)設(shè)置的width+ padding * 2+ border * 2，即200px + 10px * 2+1px * 2，為222px。高度亦然。

let f_box = document.querySelector('.father');let f_height = f_box.offsetHeight;let f_width = f_box.offsetWidth;console.log(f_height); // 220pxconsole.log(f_width); // 220px復(fù)制代碼

clientHeight和clientWidth

clientHeight和clientWidth表示可視區(qū)域的高度和寬度，包括元素內(nèi)容本身的寬度和高度以及padding。但是，如果有滾動(dòng)條的話(huà)，需要減去滾動(dòng)條的寬度和高度。

沒(méi)有滾動(dòng)條時(shí)

一個(gè)p有如下樣式：

.box {    margin: 10px auto;    padding: 10px;    width: 200px;    height: 200px;    border: 1px solid #000;    background: lightpink;
}復(fù)制代碼

頁(yè)面效果如下：

其盒模型如下：

該元素的clientHeight為width+padding * 2，即200px+10px * 2，為220px，高度亦然。

let box = document.querySelector('.box');let height = box.clientHeight;let width = box.clientWidth;console.log(height); // 220pxconsoel.log(width); // 220px復(fù)制代碼

含有滾動(dòng)條時(shí)

當(dāng)含有滾動(dòng)條時(shí)，需要減去滾動(dòng)條的寬度和高度。

父子p有如下樣式：

.father {    margin: 10px auto;    padding: 10px;    width: 200px;    height: 200px;    border: 1px solid;    background: lightsalmon;    /* 滾動(dòng)條高度和寬度被計(jì)算到content中 */
    overflow: auto;
}.son {    width: 220px;    height: 220px;    background: plum;
}復(fù)制代碼

頁(yè)面效果如下：

其盒模型如下：

那么，clientWidth的值為width+padding * 2-17px，即200px+10px * 2-17px，為203px

所謂可視區(qū)域，就是我們最終能看到的部分。就像下圖一樣，原來(lái)的元素如果沒(méi)有滾動(dòng)條，它的尺寸應(yīng)該是紅色框線所包裹的尺寸。

但是，由于多了滾動(dòng)條，可視區(qū)域就減小了，如下所示。在原有尺寸基礎(chǔ)上減去滾動(dòng)條的寬度和高度就是可視區(qū)域的寬度和高度了。

scrollHeight與scrollWidth

scrollHeight用于獲取一個(gè)元素的內(nèi)容高度，包括溢出的部分。scrollWidth用于獲取一個(gè)元素的內(nèi)容寬度，包括溢出的部分。當(dāng)然，在沒(méi)有溢出，即沒(méi)有滾動(dòng)條的情況下，這兩個(gè)值等同于clientHeight和clientWidth，也是包括元素本身的尺寸以及padding，但不包括border和margin

父子p有如下樣式：

.father {    margin: 10px auto;    padding: 10px;    /* 父元素的內(nèi)容寬度：320px + 10px = 330px */
    width: 200px;    /* 父元素的內(nèi)容高度：200px - 17px = 203px */
    height: 200px;    border: 1px solid #000;    overflow: auto;
}.son {    padding: 10px;    /* 子元素的真實(shí)寬度：300px + 10px * 2 = 320px */
    width: 300px;    height: 100px;    background: plum;
}復(fù)制代碼

頁(yè)面效果如下：

由于子元素的高度只有100px，沒(méi)有發(fā)生溢出，因此，父元素的scrollHeight就等同于clientHeight：width+padding-水平滾動(dòng)條高度17px，即200px+10px*2-17px=203px

子元素真實(shí)占據(jù)的寬度有300px+10px*2 = 320px，外加父元素設(shè)置的左側(cè)內(nèi)邊距還是10px，右側(cè)內(nèi)邊距失效。因此父元素的scrollWidth的值為320px+10px，為330px

let f_box = document.querySelector('.father');let height = f_box.scrollHeight;let width = f_box.scrollWidth;console.log(height); // 203pxconsole.log(width); // 330px復(fù)制代碼

父元素設(shè)置overflow造成右內(nèi)邊距失效的問(wèn)題

關(guān)于父元素設(shè)置overflow: auto時(shí)，造成的右內(nèi)邊距失效，有以下圖片可以佐證。

如上所示：父元素的左側(cè)和頂部都有10px的內(nèi)邊距，但是右側(cè)就沒(méi)有。

如上所示：因?yàn)樽釉貨](méi)有設(shè)置overflow，所以可以看到子元素的右內(nèi)邊距依然是生效的。

當(dāng)子元素的寬度大于父元素的寬度時(shí)，子元素的margin-right或者父元素的padding-right是被計(jì)算為0的。這里不具體展開(kāi)。

看完了這篇文章，相信你對(duì)JavaScript獲取元素尺寸的方法有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站標(biāo)題：JavaScript獲取元素尺寸的方法
文章位置：http://www.chinadenli.net/article32/gpccpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、定制開(kāi)發(fā)、云服務(wù)器、動(dòng)態(tài)網(wǎng)站、響應(yīng)式網(wǎng)站、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)