客戶區(qū)尺寸client-創(chuàng)新互聯(lián)

關(guān)于元素尺寸，一般地，有偏移大小offset、客戶區(qū)大小client和滾動大小scroll。前文已經(jīng)介紹過偏移屬性，后文將介紹scroll滾動大小，本文主要介紹客戶區(qū)大小client

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),湛江企業(yè)網(wǎng)站建設(shè),湛江品牌網(wǎng)站建設(shè),網(wǎng)站定制,湛江網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,湛江網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

客戶區(qū)尺寸client

客戶區(qū)大小

客戶區(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>

[注意]滾動條寬度不計(jì)算在內(nèi)

<div id="test" ></div><script>//103(120-17)，滾動條寬度為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í)，如果仍然存在滾動條，各瀏覽器表現(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)不設(shè)置高度height值時(shí)，各個瀏覽器表現(xiàn)不一樣。firefox存在一個最小高度為34px的垂直滾動條，IE7-瀏覽器存在一個最小高度為19px的垂直滾動條，而其他瀏覽器的垂直滾動條無最小高度　

所以，當(dāng)clientHeight的值小于34px時(shí)，firefox會返回34；當(dāng)clientHeight的值小于19px時(shí)，IE7-會返回19

<div id="test" ></div><script>//chrome/IE8+/safari:0(因?yàn)閔eight和padding都是0)//firefox:34(設(shè)置overflow:scroll之后，默認(rèn)存在一個高34px的垂直滾動條)//IE7-:19(默認(rèn)存在一個高19px的垂直滾動條)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屬性來表示頁面大小(不包含滾動條寬度)

[注意]在IE7-瀏覽器中，<html>元素默認(rèn)存在垂直滾動條

<body ><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 ><script>//1920console.log(window.innerWidth);//947console.log(window.innerHeight);</script>

如果沒有滾動條，這兩類屬性在電腦端表示同樣的值，但是卻表示不同的含義。在移動端，innerWidth和innerHeight表示的是視覺視口，即用戶正在看到的網(wǎng)站的區(qū)域；而document.documentElement.clientWidth和clientHeight表示的是布局視口，指CSS布局的尺寸。詳細(xì)情況移步至此

[注意]頁面的客戶區(qū)大小和頁面的實(shí)際大小是不同的，頁面的實(shí)際大小將由后文的scroll滾動大小來表示

注意事項(xiàng)

【1】所有客戶區(qū)client屬性都是只讀的

<div id="test" ></div><script>console.log(test.clientHeight);//IE8-瀏覽器會報(bào)錯，其他瀏覽器則靜默失敗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>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁題目：客戶區(qū)尺寸client-創(chuàng)新互聯(lián)
文章鏈接：http://www.rwnh.cn/article18/cehodp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、企業(yè)建站、網(wǎng)站策劃、網(wǎng)站制作、響應(yīng)式網(wǎng)站、域名注冊

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

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

客戶區(qū)尺寸client-創(chuàng)新互聯(lián)

客戶區(qū)大小

頁面大小

注意事項(xiàng)