JavaScript clientWidth
clientWidth 屬性可以返回指定元素客戶區寬度,返回一個數字(單位以畫素計)。
客戶區寬度 = width + padding-left+ padding-right。
clientWidth 只讀屬性,不能進行賦值操作。
語法結構:
[JavaScript] 純文字檢視 複製程式碼dom.clientWidth
圖示如下:
clientWidth 返回的就是圖中白色區域的寬度。
瀏覽器支援:
(1).IE 瀏覽器支援此屬性。
(2).edge 瀏覽器支援此屬性。
(3).谷歌瀏覽器支援此屬性。
(4).火狐瀏覽器支援此屬性。
(5).opera 瀏覽器支援此屬性。
(6).safari 瀏覽器支援此屬性。
程式碼例項:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="https://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #ant { width: 150px; line-height: 40px; border: 2px dotted green; padding: 20px; text-align: center; font-size: 12px; } </style> <script> window.onload = ()=> { oDiv = document.getElementById("ant"); oDiv.innerHTML = oDiv.clientWidth; } </script> </head> <body> <div id="ant"></div> </body> </html>
程式碼執行效果截圖如下:
上述程式碼計算出 clientWidth 屬性值為 190,並將其寫入 div 中,190 = 150 + 20 + 20。
特別說明:此屬性返回一個數字,不帶單位,預設單位是畫素。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #box { width :160px; height :70px; list-style-type: none; border :2px dotted #ccc; font-size :12px; margin-bottom: 5px; overflow: auto; } #inner { height: 250px; width: 30px; background-color:green; } #show { width :160px; color :green; font-size :12px; border :2px dotted #ccc; text-align: center; } </style> <script> window.onload = ()=> { let oBox = document.getElementById("box"); let oShow = document.getElementById("show"); oShow.innerHTML = oBox.clientWidth; } </script> </head> <body> <div id="box"> <div id="inner"></div> </div> <div id="show"></div> </body> </html>
程式碼執行效果截圖如下:
子元素較寬高,於是可能會出現垂直滾動條。
此滾動條在水平方位上必然有一個厚度,當前谷歌瀏覽器中值為 17px,其他瀏覽器不得而知。
此厚度不包括在 clientWidth 之中,width + padding-left + padding-right - 滾動條厚度 = 143。
相關文章
- 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] How javascript read the property?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] Understanding JavaScript Proxies with Symbol.toPrimitiveJavaScriptSymbolMIT
- JavaScript EventJavaScript
- JavaScript BackdoorJavaScript
- JavaScript normalize()JavaScriptORM
- JavaScript setDate()JavaScript
- JavaScript setMinutes()JavaScript
- JavaScript getDate()JavaScript
- JavaScript setHours()JavaScript