js獲取Html元素的實際寬度高度的方法
更新時間：2016年05月19日 10:00:40 投稿：jingxian
下面小編就為大家?guī)硪黄猨s獲取Html元素的實際寬度高度的方法。小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
第一種情況就是寬高都寫在樣式表里，就比如#div1{width:120px;}。這中情況通過#div1.style.width拿不到寬度，而通過#div1.offsetWidth才可以獲取到寬度。
第二種情況就是寬和高是寫在行內中，比如style="width:120px;"，這中情況通過上述2個方法都能拿到寬度。
小結，因為id.offsetWidth和id.offsetHeight無視樣式寫在樣式表還是行內，所以我們獲取元素寬和高的時候最好用這2個屬性。注意如果不是寫在行內style中的屬性都不能通過id.style.atrr來獲取。
現 在的前端制作很少直接把樣式寫style里了，都是寫在樣式表里。如果你要獲取的樣式沒有相對應的（就像#div1.style.width對 應#div1.offsetWidth），就只能分別針對不用瀏覽器來獲取樣式表的屬性了，可以試著搜索“JS 獲取樣式屬性”之類的。
代碼：
var o = document.getElementById("view");
var h = o.offsetHeight; //高度
var w = o.offsetWidth; //寬度
以上這篇js獲取Html元素的實際寬度高度的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JS實現的不規(guī)則TAB選項卡效果代碼,基于鼠標事件動態(tài)設置頁面元素樣式實現該效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要給大家介紹了關于ES6中類（Class）的相關資料，文中介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
這篇文章主要介紹了微信小程序五子棋游戲的悔棋實現方法,結合實例形式分析了微信小程序中悔棋的原理與相關實現技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2019-02-02
本文主要是給大家?guī)硪粋€時間軸的組件開發(fā)教程，其主要功能就是可以拖動時間軸來定位當前時間，可以通過鼠標滾輪來修改當前時間分辨率，需要的可以參考一下2022-10-10
這篇文章主要介紹了javaScript實現滾動新聞的方法,涉及javascript實現頁面滾動的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
本文給大家分享的是類似QQ窗口的抖動效果,只是覺得好玩，沒什么技術含量，推薦給大家，有需要的小伙伴可以參考下。2015-05-05
javascript中使用css需要注意的地方小結，注意保留字問題。2010-09-09
這篇文章主要介紹了js實現的tab標簽切換效果，功能非常簡單，實現了點擊切換的效果，推薦給大家，有需要的小伙伴可以參考下。2015-09-09
這篇文章介紹了JS異步的執(zhí)行順序，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
引入autocomplete組件時JS報未結束字符串常量錯誤
在引入jQuery的autocomplete組件時，遇到js報未結束字符串常量錯誤，原因及解決方法如下，大家可以參考下2014-03-03