首頁 > web前端 > html教學 > js取得Html元素的實際寬度高度的方法

js取得Html元素的實際寬度高度的方法

不言
發布: 2018-06-05 14:39:36
原創
3502 人瀏覽過

下面小編就為大家帶來一篇js取得Html元素的實際寬度高度的方法。小編覺得蠻不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧

第一種情況就是寬高都寫在樣式表裡,就例如#p1{width:120px;}。這中情況透過#p1.style.width拿不到寬度,而透過#p1.offsetWidth才可以取得到寬度。

第二種情況就是寬和高是寫在行內中,例如style="width:120px;",這中情況透過上述2個方法都能拿到寬度。

小結,因為id.offsetWidth和id.offsetHeight無視於樣式寫在樣式表還是行內,所以我們取得元素寬高的時候最好用這2個屬性。注意如果不是寫在行內style中的屬性都不能透過id.style.atrr來取得。

現 在的前端製作很少直接把樣式寫style裡了,都是寫在樣式表裡。如果你要取得的樣式沒有相對應的(就像#p1.style.width對應#p1.offsetWidth),就只能分別針對不用瀏覽器來取得樣式表的屬性了,可以試著搜尋「JS 取得樣式屬性”之類的。

程式碼:

var o = document.getElementById("view");
var h = o.offsetHeight; //高度
var w = o.offsetWidth; //宽度
登入後複製

相關推薦:

js html5實作頁面可刷新的倒數計時效果



#

以上是js取得Html元素的實際寬度高度的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
js
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板