元素的客戶區
元素的客戶區大小，指的是元素內容及其內邊距所占據的空間大小。
相關屬性如下：
1. clientWidth：元素內容區寬度+元素左右內邊距
2. clientHeight：元素內容區高度+元素上下內邊距
案例代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .parent { width: 500px; height: 500px; margin: 100px auto; background-color: red; border: 10px solid #000; overflow: hidden; } .child { width: 300px; height: 300px; border: 10px solid #000; padding: 10px; margin: 50px 90px; background-color: green; } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> <script> var child = document.querySelector('.child'); var html = ''; html += 'clientHeight=' + child.clientHeight + "<br>"; html += 'clientWidth=' + child.clientWidth + "<br>"; child.innerHTML = html; </script> </body> </html>
結果如下：
我們不難發現一個現象元素的offsetwidth=元素的clientWidth+左右邊框長度，offsetTop同理。
因為元素的offsetWidth = 元素的寬+左右內邊距寬度+左右邊框寬度
即使在怪異盒模型下也成立：
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .parent { width: 500px; height: 500px; margin: 100px auto; background-color: red; border: 10px solid #000; overflow: hidden; } .child { width: 300px; height: 300px; border: 10px solid #000; padding: 10px; margin: 50px 90px; background-color: green; /*注意這里*/ box-sizing: border-box; } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> <script> var child = document.querySelector('.child'); var html = ''; html += 'clientHeight=' + child.clientHeight + "<br>"; html += 'clientWidth=' + child.clientWidth + "<br>"; html += "offsetWidth=" + child.offsetWidth + "<br>"; html += "offsetHeight=" + child.offsetHeight + "<br>"; child.innerHTML = html; </script> </body> </html>
結果如下：
現給出一個確定瀏覽器窗口大小的函數：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> function getViewport() { if (document.compatMode === 'BackCompat') { return { width: document.body.clientWidth, height: document.body.clientHeight } } else { return { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight } } } console.log(getViewport()); </script> </body> </html>
結果如下：
這里檢查document.compatMode屬性，判斷瀏覽器是否運行在混雜模式。
在這里我們改寫一下該函數：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> function getViewport() { if (document.compatMode === 'BackCompat') { getViewport = function () { return { width: document.body.clientWidth, height: document.body.clientHeight } } } else { getViewport = function () { return { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight } } } return getViewport(); } console.log(getViewport()); </script> </body> </html>
改造之后我們同樣能獲取對應的結果，改寫之后，我們在調用getViewport的時候，就不會進行判斷了。我們知道程序中沒有if判斷的代碼往往比有if判斷的代碼運行的時候，性能會高一點。
我們在改造一下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> var getViewport = (function () { if (document.compatMode === 'BackCompat') { return function () { return { width: document.body.clientWidth, height: document.body.clientHeight } } } else { return function () { return { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight } } } })(); console.log(getViewport()); </script> </body> </html>
現在這個函數達到了改造一的效果，優化了性能。
其實這兩次改造都提升了代碼的性能，我們把這種技巧叫做惰性載入函數。
改造一在第一次運行的時候會消耗一下性能，改造二最開始的時候會消耗一下性能，至於采用那種方式進行優化，取決於具體需求。
舉個例子：假如這個方法我是一定要使用的，那么可以使用第二種改造，假如這個方法我不一定會使用到，那么可以使用第一種改造。
關於元素客戶區大小的知識點差不多就是這樣子，如有錯誤，請告知一下，好及時修改。順便扯了一下js的高級技巧，我覺得只要能從一個知識點聯想到另一個知識點就是好事。