JavaScript clientHeight
此屬性可以返回指定元素客戶區高度,單位預設是畫素。
客戶區高度 = height屬性值 + padding-top + padding-bottom。
clientHeight是隻讀屬性,不能進行賦值操作。
語法結構:
[JavaScript] 純文字檢視 複製程式碼dom.clientHeight
圖示如下:
clientHeight返回的就是圖中白色區域的高度。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #ant{ width:200px; height:100px; line-height:100px; background:red; border:10px solid green; padding:20px; text-align:center; } </style> <script> window.onload=function(){ odiv=document.getElementById("ant"); odiv.innerHTML=odiv.clientHeight; } </script> </head> <body> <div id="ant"></div> </body> </html>
上述程式碼可以計算出clientHeight屬性值為140,並將其寫入div中。140=100+20+20。
特別說明:此屬性返回的是一個數字140,不帶單位,但預設單位是畫素。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #ant{ width:200px; height:100px; background:red; border:10px solid green; padding:20px; text-align:center; overflow:auto } #inner { height:50px; width:300px; background-color:#ccc; } </style> <script type="text/javascript"> window.onload=function(){ var odiv = document.getElementById("ant"); var ospan = document.getElementById("show"); ospan.innerHTML = odiv.clientHeight; } </script> </head> <body> <div id="ant"> <div id="inner"></div> </div> <span id="show"></span> </body> </html>
實際應用中,可能元素的子元素較寬,可能會出現橫向滾動條。
此滾動條在垂直方位上必然有一個厚度,當前谷歌瀏覽器中值為17px,其他瀏覽器不得而知,感興趣的朋友可以自行測試。這個厚度不包括在clientHeight之中。
上面clientHeight的計算方式:
height屬性值 + padding-top + padding+bottom - 滾動條厚度 = 100 + 20 + 20 - 17 = 123。
相關文章
- javascript的clientHeight和clientWidh屬性介紹JavaScriptclient
- document.body.clientHeight和document.documentElement.clientHeight區別client
- javascript - 所有的檢視屬性和方法(offsetHeight、clientHeight、scrollHeight、innerHeight等)JavaScriptclient
- element.clientHeight,offsetHeight,scrollHeightclient
- clientWidth和clientHeight屬性的用法client
- Owner,Parent,Self,Sender,Clientheight,Height(轉)client
- js clientWidth和clientHeight屬性的作用JSclient
- scrollHeight、scrollTop、clientHeight瀏覽器相容問題client瀏覽器
- 怪異模式和標準模式下document.documentElement.clientHeight模式client
- clientWidth、clientHeight、offsetWidth、offsetHeight以及scrollWidth、scrollHeightclient
- clientX/Y pageX/Y offsetX/Y layerX/Y screenX/Y clientHeight innerWidth...client
- JavaScript高階:JavaScript物件導向,JavaScript內建物件,JavaScript BOM,JavaScript封裝JavaScript物件封裝
- javaScript系列[06]-javaScript和thisJavaScript
- 【JavaScript學習】JavaScript物件建立JavaScript物件
- 【轉】eval()函式(javascript) - [javaScript]函式JavaScript
- JavaScript -"this"JavaScript
- javascript ??JavaScript
- This in JavaScriptJavaScript
- “This” is For JavaScriptJavaScript
- javascript thisJavaScript
- javascriptJavaScript
- javaScript系列[05]-javaScript和JSONJavaScriptJSON
- 44 道 JavaScript 難題(JavaScript Puzzlers!)JavaScript
- 【轉向JavaScript系列】AST in Modern JavaScriptJavaScriptAST
- javascript,還是javascript的問題JavaScript
- JavaScript 教程之JavaScript常用框架簡介JavaScript框架
- 《深入理解JavaScript》——2.3 JavaScript有用嗎JavaScript
- 【JavaScript】--JavaScript總結一覽無餘JavaScript
- 【HTML、JAVASCRIPT、CSS】3、Javascript基本概念HTMLJavaScriptCSS
- JavaScript EventJavaScript
- JavaScript BackdoorJavaScript
- JavaScript normalize()JavaScriptORM
- JavaScript setDate()JavaScript
- JavaScript setMinutes()JavaScript
- JavaScript getDate()JavaScript
- JavaScript setHours()JavaScript
- JavaScript setUTCMinutes()JavaScript
- JavaScript setUTCHours()JavaScript