前面的話
關于元素尺寸,一般地,有偏移大小offset、客戶區大小client和滾動大小scroll。前文已經介紹過偏移屬性,后文將介紹scroll滾動大小,本文主要介紹客戶區大小client

客戶區大小
客戶區大小client指的是元素內容及其內邊距所占據的空間大小
clientHeight
clientHeight屬性返回元素節點的客戶區高度
clientHeight = padding-top + height + padding-bottom
clientWidth
clientWidth屬性返回元素節點的客戶區寬度
clientWidth = padding-left + width + padding-right
<div id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;"></div> <script> //120(10+100+10) console.log(test.clientHeight); console.log(test.clientWidth); </script>
[注意]滾動條寬度不計算在內
<div id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;overflow:scroll"></div> <script> //103(120-17),滾動條寬度為17px console.log(test.clientHeight); console.log(test.clientWidth); </script>
<div id="test" style="width:100px;margin: 10px;border: 1px solid black;overflow:scroll;font-size:20px;line-height:1;height:100px"> 內容<br>內容<br>內容<br>內容<br>內容<br>內容<br> </div> <script> //83(100-17) console.log(test.clientHeight); </script>
當height和縱向padding的和為0(以及小于17px的情況)時,如果仍然存在滾動條,各瀏覽器表現不一樣
<div id="test" style="width: 100px;height:0;margin: 10px;border: 1px solid black;overflow:scroll"></div> <script> //chrome/safari:-17(0-17) //firefox/IE:0 console.log(test.clientHeight); </script>
<div id="test" style="width: 100px;height:10px;margin: 10px;border: 1px solid black;overflow:scroll"></div> <script> //chrome/safari:-7(10-17) //firefox/IE:0 console.log(test.clientHeight); </script>
bug
如果設置overflow:scroll,使得滾動條始終存在,當不設置高度height值時,各個瀏覽器表現不一樣。firefox存在一個最小高度為34px的垂直滾動條,IE7-瀏覽器存在一個最小高度為19px的垂直滾動條,而其他瀏覽器的垂直滾動條無最小高度
所以,當clientHeight的值小于34px時,firefox會返回34;當clientHeight的值小于19px時,IE7-會返回19
<div id="test" style="width: 100px;margin: 10px;border: 1px solid black;overflow:scroll"></div> <script> //chrome/IE8+/safari:0(因為height和padding都是0) //firefox:34(設置overflow:scroll之后,默認存在一個高34px的垂直滾動條) //IE7-:19(默認存在一個高19px的垂直滾動條) console.log(test.clientHeight); </script>
<div id="test" style="width: 100px;margin: 10px;border: 1px solid black;font-size:20px;line-height:1;overflow:scroll">內容</div> <script> //chrome/IE8+/safari:20(20*1) //firefox:34(20<34) //IE7-:20(20>19) console.log(test.clientHeight); </script>
<div id="test" style="width: 100px;padding-top:20px;margin: 10px;border: 1px solid black;font-size:20px;line-height:1;overflow:scroll">內容</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" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;"></div> <script> //1 1 console.log(test.clientLeft); console.log(test.clientTop); </script>
[注意]如果display為inline時,clientLeft屬性和clientTop屬性都返回0
<div id="test" style="display:inline;width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;"></div> <script> //0 0 console.log(test.clientLeft); console.log(test.clientTop); </script>
頁面大小
常用document.documentElement的client屬性來表示頁面大小(不包含滾動條寬度)
[注意]在IE7-瀏覽器中,<html>元素默認存在垂直滾動條
<body style="overflow:scroll"> <script> //1903(1920-17) console.log(document.documentElement.clientWidth); //930(947-17) console.log(document.documentElement.clientHeight); </script>
另一對常用的表示頁面大小的屬性是window.innerHeight和innerWidth屬性(包含滾動條寬度)
innerHeight和innerWidth表示的是瀏覽器窗口大小減去菜單欄、地址欄等剩余的頁面尺寸,由于滾動條是屬于頁面的,所以包含滾動條
[注意]IE8-瀏覽器不支持innerHeight和innerWidth屬性
<body style="overflow:scroll"> <script> //1920 console.log(window.innerWidth); //947 console.log(window.innerHeight); </script>
如果沒有滾動條,這兩類屬性在電腦端表示同樣的值,但是卻表示不同的含義。在移動端,innerWidth和innerHeight表示的是視覺視口,即用戶正在看到的網站的區域;而document.documentElement.clientWidth和clientHeight表示的是布局視口,指CSS布局的尺寸。詳細情況移步至此
[注意]頁面的客戶區大小和頁面的實際大小是不同的,頁面的實際大小將由后文的scroll滾動大小來表示
注意事項
【1】所有客戶區client屬性都是只讀的
<div id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;"></div> <script> console.log(test.clientHeight); //IE8-瀏覽器會報錯,其他瀏覽器則靜默失敗 test.clientHeight = 10; console.log(test.clientHeight); </script>
【2】如果給元素設置了display:none,則客戶區client屬性都為0
<div id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;display:none;"></div> <script> console.log(test.clientHeight);//0 console.log(test.clientTop);//0 </script>
【3】每次訪問客戶區client屬性都需要重新計算,重復訪問需要耗費大量的性能,所以要盡量避免重復訪問這些屬性。如果需要重復訪問,則把它們的值保存在變量中,以提高性能
<div id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;"></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" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;"></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>
文章列表