溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
關(guān)于元素尺寸，一般地，有偏移大小offset、客戶區(qū)大小client和滾動(dòng)大小scroll。前文已經(jīng)介紹過偏移屬性，后文將介紹scroll滾動(dòng)大小，本文主要介紹客戶區(qū)大小client
客戶區(qū)大小client指的是元素內(nèi)容及其內(nèi)邊距所占據(jù)的空間大小
clientHeight
clientHeight屬性返回元素節(jié)點(diǎn)的客戶區(qū)高度
clientHeight = padding-top + height + padding-bottom
clientWidth
clientWidth屬性返回元素節(jié)點(diǎn)的客戶區(qū)寬度
clientWidth = padding-left + height + padding-right
<div id="test" ></div><script>//120(10+100+10)console.log(test.clientHeight); console.log(test.clientWidth);</script>
[注意]滾動(dòng)條寬度不計(jì)算在內(nèi)
<div id="test" ></div><script>//103(120-17)，滾動(dòng)條寬度為17pxconsole.log(test.clientHeight); console.log(test.clientWidth);</script>
<div id="test" > 內(nèi)容<br>內(nèi)容<br>內(nèi)容<br>內(nèi)容<br>內(nèi)容<br>內(nèi)容<br></div><script>//83(100-17)console.log(test.clientHeight);</script>
當(dāng)height和縱向padding的和為0(以及小于17px的情況)時(shí)，如果仍然存在滾動(dòng)條，各瀏覽器表現(xiàn)不一樣
<div id="test" ></div><script>//chrome/safari:-17(0-17)//firefox/IE:0console.log(test.clientHeight);</script>
<div id="test" ></div><script>//chrome/safari:-7(10-17)//firefox/IE:0console.log(test.clientHeight);</script>
bug
如果設(shè)置overflow:scroll，使得滾動(dòng)條始終存在，當(dāng)不設(shè)置高度height值時(shí)，各個(gè)瀏覽器表現(xiàn)不一樣。firefox存在一個(gè)最小高度為34px的垂直滾動(dòng)條，IE7-瀏覽器存在一個(gè)最小高度為19px的垂直滾動(dòng)條，而其他瀏覽器的垂直滾動(dòng)條無最小高度
所以，當(dāng)clientHeight的值小于34px時(shí)，firefox會(huì)返回34；當(dāng)clientHeight的值小于19px時(shí)，IE7-會(huì)返回19
<div id="test" ></div><script>//chrome/IE8+/safari:0(因?yàn)閔eight和padding都是0)//firefox:34(設(shè)置overflow:scroll之后，默認(rèn)存在一個(gè)高34px的垂直滾動(dòng)條)//IE7-:19(默認(rèn)存在一個(gè)高19px的垂直滾動(dòng)條)console.log(test.clientHeight);</script>
<div id="test" >內(nèi)容</div><script>//chrome/IE8+/safari:20(20*1)//firefox:34(20<34)//IE7-:20(20>19)console.log(test.clientHeight);</script>
<div id="test" >內(nèi)容</div><script>//chrome/IE8+/safari:40(20*1+20)//firefox:40(40>34)//IE7-:40(40>19)console.log(test.clientHeight);</script>
clientLeft
clientLeft屬性返回左邊框的寬度
clientTop
clientTop屬性返回上邊框的寬度
<div id="test" ></div><script>//1 1console.log(test.clientLeft); console.log(test.clientTop);</script>
[注意]如果display為inline時(shí)，clientLeft屬性和clientTop屬性都返回0
<div id="test" ></div><script>//0 0console.log(test.clientLeft); console.log(test.clientTop);</script>
常用document.documentElement的client屬性來表示頁面大小(不包含滾動(dòng)條寬度)
[注意]在IE7-瀏覽器中，<html>元素默認(rèn)存在垂直滾動(dòng)條
<body ><script>//1903(1920-17)console.log(document.documentElement.clientWidth);//930(947-17)console.log(document.documentElement.clientHeight);</script>
另一個(gè)對常用的表示頁面大小的屬性是window.innerHeight和innerWidth屬性(包含滾動(dòng)條寬度)
innerHeight和innerWidth表示的是瀏覽器窗口大小減去菜單欄、地址欄等剩余的頁面尺寸，由于滾動(dòng)條是屬于頁面的，所以包含滾動(dòng)條
[注意]IE8-瀏覽器不支持innerHeight和innerWidth屬性
<body ><script>//1920console.log(window.innerWidth);//947console.log(window.innerHeight);</script>
如果沒有滾動(dòng)條，這兩類屬性在電腦端表示同樣的值，但是卻表示不同的含義。在移動(dòng)端，innerWidth和innerHeight表示的是視覺視口，即用戶正在看到的網(wǎng)站的區(qū)域；而document.documentElement.clientWidth和clientHeight表示的是布局視口，指CSS布局的尺寸。詳細(xì)情況移步至此
[注意]頁面的客戶區(qū)大小和頁面的實(shí)際大小是不同的，頁面的實(shí)際大小將由后文的scroll滾動(dòng)大小來表示
【1】所有客戶區(qū)client屬性都是只讀的
<div id="test" ></div><script>console.log(test.clientHeight);//IE8-瀏覽器會(huì)報(bào)錯(cuò)，其他瀏覽器則靜默失敗test.clientHeight = 10; console.log(test.clientHeight);</script>
【2】如果給元素設(shè)置了display:none，則客戶區(qū)client屬性都為0
<div id="test" ></div><script>console.log(test.clientHeight);//0console.log(test.clientTop);//0</script>
【3】每次訪問客戶區(qū)client屬性都需要重新計(jì)算，重復(fù)訪問需要耗費(fèi)大量的性能，所以要盡量避免重復(fù)訪問這些屬性。如果需要重復(fù)訪問，則把它們的值保存在變量中，以提高性能
<div id="test" ></div> <script>console.time("time");for(var i = 0; i < 100000; i++){ var a = test.clientHeight;
}
console.timeEnd('time');//66.798ms</script>
<div id="test" ></div> <script>console.time("time");var a = test.clientHeight;for(var i = 0; i < 100000; i++){ var b = a;
}
console.timeEnd('time');//1.705ms</script>免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼