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