input文字框的實際寬度包括邊框的
當然這個問題是非常的簡單的,只要稍有經驗的同學都不成問題。
但是還是有不少初學者會忽略,下面就通過程式碼例項做一下介紹,程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>螞蟻部落</title> <style> #txt{ width:200px; border:1px solid #ccc; padding:10px; margin:10px; } </style> <script> window.onload = function () { var otxt = document.getElementById("txt"); var obt = document.getElementById("bt"); var odiv = document.getElementById("antzone"); obt.onclick = function () { odiv.innerHTML = otxt.offsetWidth; } } </script> </head> <body> <div id="antzone"></div> <input type="text" id="txt" value="螞蟻部落歡迎您"/> <input type="button" id="bt" value="檢視效果"/> </body> </html>
由上面的程式碼可以看出實際佔用的寬度是包含邊框和內邊距,當然也包含外邊距。
相關文章
- input文字框寬度自適應
- input文字框實現寬度自適應程式碼例項
- 如何使用CSS設定文字框的邊框CSS
- 如何去除掉input的預設邊框
- CSS input文字框樣式CSS
- CSS input 文字框樣式CSS
- input 文字框內容居中
- CSS匹配input text文字框CSS
- input只能輸入文字框
- JavaScript獲取input text文字框JavaScript
- 設定bootstrap modal模態框的寬度和寬度boot
- javascript input文字框新增提示文字效果JavaScript
- css input文字框中的內容居中效果CSS
- javascript動態設定input文字框的值JavaScript
- 實現文字標題和input文字框垂直居中對齊
- input文字框焦點背景變色
- JavaScript設定input文字框只讀JavaScript
- CSS 設定input文字框樣式CSS
- css設定input文字框樣式CSS
- 設定input文字框只讀效果
- 設定input type為text的文字框樣式
- javascript當文字框獲得焦點設定邊框JavaScript
- 去掉input標籤獲得焦點後的邊框
- JS實現簡單的判斷文字框長度JS
- 為input文字框設定背景圖片
- html input文字輸入框的一些總結HTML
- <input>文字框的readonly和disabled屬性區別
- 文字嵌入邊框程式碼例項
- css實現的交叉邊框效果CSS
- 讓input文字框文字垂直居中程式碼例項
- CSS 邊框陰影立體邊框CSS
- input文字框獲取焦點伸縮效果
- JavaScript 動態設定input文字框只讀JavaScript
- 單獨設定input text文字框樣式
- 如何讓input文字框和圖片對齊
- input文字框圓角效果程式碼例項
- js動態設定input文字框的readonly屬性JS
- 去掉antd的Input元件獲取焦點時的藍色邊框元件