js獲取元素的實際尺寸程式碼例項
本章節分享一段程式碼例項,它實現了獲取元素實際尺寸的功能。
元素的實際尺寸應該包含width+padding+border。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #antzone { width:200px; height:100px; border:10px solid red; padding:20px; text-align:center; line-height:100px; } </style> <script type="text/javascript"> window.onload = function () { antzone.innerHTML = "寬度:" + antzone.offsetWidth + "高度" + antzone.offsetHeight; } </script> </head> <body> <div id="antzone"></div> </body> </html>
上面的程式碼實現了我們的要求,更多內容可以參閱相關閱讀。
特別說明一下,id屬性值可以直接當做對應的元素物件使用。
相關閱讀:
(1).offsetWidth可以參閱js offsetWidth一章節。
(2).offsetHeight可以參閱js offsetHeight一章節。
相關文章
- jquery獲取圖片的實際尺寸大小程式碼例項jQuery
- js獲取瀏覽器視窗尺寸程式碼例項JS瀏覽器
- jQuery獲取視窗尺寸的例項程式碼jQuery
- js獲取頁面中所有元素程式碼例項JS
- js獲取上傳圖片尺寸和格式程式碼例項JS
- js獲取瀏覽器客戶區尺寸程式碼例項JS瀏覽器
- jQuery獲取指定元素的父元素程式碼例項jQuery
- css獲取指定元素的兄弟元素程式碼例項CSS
- 獲取img圖片原始尺寸程式碼例項
- jquery獲取元素高度程式碼例項jQuery
- js實現的獲取指定元素的節點封裝程式碼例項JS封裝
- javascript獲取指定元素父元素程式碼例項JavaScript
- js實現的div元素尺寸彈性縮放效果程式碼例項JS
- 使用jquery獲取指定元素的子元素程式碼例項jQuery
- jQuery獲取指定的li元素程式碼例項jQuery
- javascript獲取元素的順序程式碼例項JavaScript
- js如何獲取指定元素的尺寸JS
- js獲取元素在頁面中的座標程式碼例項JS
- 獲取指定元素下所有li元素程式碼例項
- jquery獲取同輩元素程式碼例項jQuery
- javascript獲取元素封裝程式碼例項JavaScript封裝
- 原生就javascript實現的獲取子元素程式碼例項JavaScript
- jquery獲取元素的標籤tagName程式碼例項jQuery
- 獲取指定區間的li元素程式碼例項
- js獲取陣列中元素出現的次數程式碼例項JS陣列
- javascript獲取瀏覽器視口尺寸程式碼例項JavaScript瀏覽器
- 獲取當前元素下一個元素程式碼例項
- jquery實現的獲取當前元素的上一個元素程式碼例項jQuery
- jQuery獲取所有的li元素程式碼例項jQuery
- javascript獲取li元素內容程式碼例項JavaScript
- jQuery獲取當前元素的上一級元素程式碼例項jQuery
- js獲取事件的型別程式碼例項JS事件型別
- js獲取偽元素選擇器規定的內容程式碼例項JS
- 原生javascript實現獲取指定元素下所有後代元素程式碼例項JavaScript
- jquery獲取指定元素的父節點程式碼例項jQuery
- jquery獲取瀏覽器客戶區尺寸程式碼例項jQuery瀏覽器
- js實現的獲取選中文字程式碼例項JS
- jquery動態設定元素的尺寸程式碼例項jQuery