js獲取Html元素的實際寬度高度的方法
更新時間：2016年05月19日 10:00:40 投稿：jingxian
下面小編就為大家?guī)硪黄猨s獲取Html元素的實際寬度高度的方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
第一種情況就是寬高都寫在樣式表里，就比如#div1{width:120px;}。這中情況通過#div1.style.width拿不到寬度，而通過#div1.offsetWidth才可以獲取到寬度。
第二種情況就是寬和高是寫在行內(nèi)中，比如style="width:120px;"，這中情況通過上述2個方法都能拿到寬度。
小結(jié)，因為id.offsetWidth和id.offsetHeight無視樣式寫在樣式表還是行內(nèi)，所以我們獲取元素寬和高的時候最好用這2個屬性。注意如果不是寫在行內(nèi)style中的屬性都不能通過id.style.atrr來獲取。
現(xiàn) 在的前端制作很少直接把樣式寫style里了，都是寫在樣式表里。如果你要獲取的樣式?jīng)]有相對應(yīng)的（就像#div1.style.width對 應(yīng)#div1.offsetWidth），就只能分別針對不用瀏覽器來獲取樣式表的屬性了，可以試著搜索“JS 獲取樣式屬性”之類的。
代碼：
var o = document.getElementById("view");
var h = o.offsetHeight; //高度
var w = o.offsetWidth; //寬度
以上這篇js獲取Html元素的實際寬度高度的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
幻燈片播放圖片的效果想必大家都有見到過吧，下面有個不錯的示例，感興趣的朋友可以參考下2013-11-11
下面小編就為大家?guī)硪黄猨s獲取Html元素的實際寬度高度的方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
TypeScript中d.ts類型聲明文件的實現(xiàn)
.d.ts 文件是 TypeScript 的類型聲明文件,它們的主要作用是為 JavaScript 庫提供類型支持,本文主要介紹了TypeScript中d.ts類型聲明文件的實現(xiàn),感興趣的可以了解一下2023-10-10
這篇文章主要介紹了JS封裝通過className獲取元素的函數(shù),涉及javascript針對頁面元素屬性的遍歷與數(shù)組相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
2008-04-04
這篇文章主要為大家詳細(xì)介紹了Bootstrap創(chuàng)建可折疊組件的對應(yīng)方法，以實例為大家分享了Bootstrap折疊組件，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要為大家詳細(xì)介紹了使用JavaScript實現(xiàn)貪吃蛇游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
下面小編就為大家?guī)硪黄@取url中用&隔開的參數(shù)實例(分享)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)元素上下左右移動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
5分鐘快速掌握J(rèn)S中var、let和const的異同
在javascript中有三種聲明變量的方式：var、let、const，這個是對新手們來說應(yīng)該掌握的知識，所以這篇文章主要給大家介紹了關(guān)于如何通過5分鐘快速掌握J(rèn)S中var，let和const的異同，需要的朋友可以參考下2018-09-09