文章出處

前面的話

  關于元素尺寸,一般地,有偏移大小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>

文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()