JavaScript clientWidth
此屬性可以返回指定元素客戶區寬度,單位預設是畫素。
客戶區寬度 = width屬性值 + padding-left+ padding-right。
clientWidth是隻讀屬性,不能進行賦值操作。
語法結構:
[JavaScript] 純文字檢視 複製程式碼dom.clientWidth
圖示如下:
clientWidth返回的就是圖中白色區域的寬度。
瀏覽器支援:
(1).IE瀏覽器支援此屬性。
(2).edge瀏覽器支援此屬性。
(3).谷歌瀏覽器支援此屬性。
(4).火狐瀏覽器支援此屬性。
(5).opera瀏覽器支援此屬性。
(6).safria瀏覽器支援此屬性。
程式碼例項:
[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; line-height:100px; background:red; border:10px solid green; padding:20px; text-align:center; font-size:12px; } </style> <script type="text/javascript"> window.onload=function(){ odiv=document.getElementById("ant"); odiv.innerHTML=odiv.clientWidth; } </script> </head> <body> <div id="ant"></div> </body> </html>
上述程式碼可以計算出clientWidth屬性值為240,並將其寫入div中。240=200+20+20。
特別說明:此屬性返回的是一個數字240,不帶單位,但預設單位是畫素。
[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:250px; width:30px; background-color:#ccc; } </style> <script type="text/javascript"> window.onload=function(){ var odiv = document.getElementById("ant"); var ospan = document.getElementById("show"); ospan.innerHTML = odiv.clientWidth; } </script> </head> <body> <div id="ant"> <div id="inner"></div> </div> <span id="show"></span> </body> </html>
實際應用中,可能元素的子元素較寬高,可能會出現垂直滾動條。
此滾動條在水平方位上必然有一個厚度,當前谷歌瀏覽器中值為17px,其他瀏覽器不得而知,感興趣的朋友可以自行測試。這個厚度不包括在clientWidth之中。
上面clientWidth的計算方式:
width屬性值 + padding-left + padding-right - 滾動條厚度 = 200 + 20 + 20 - 17 = 223。
相關文章
- JavaScript屬性中的offsetLeft、offsetWidth、clientWidth、scrollLeft、scrollWidth、innerWidJavaScriptclient
- clientWidth和offsetWidth的區別client
- clientWidth和clientHeight屬性的用法client
- scrollWidth,clientWidth,offsetWidth的區別client
- dom的寬高 clientWidth offsetWidth scrollWidthclient
- js clientWidth和clientHeight屬性的作用JSclient
- scrollWidth,clientWidth與offsetWidth的區別client
- 元素的尺寸 offsetWidth和clientWidth的區別client
- js元素尺寸和位置,包含clientWidth、offsetWidth、scrollWidth等JSclient
- offsetWidth和clientWidth屬性的區別是什麼client
- clientWidth、clientHeight、offsetWidth、offsetHeight以及scrollWidth、scrollHeightclient
- 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