js裡關於各種尺寸的獲取

2022-02-28 18:17:47 字數 955 閱讀 4688

與元素尺寸相關的屬性

元素尺寸屬性

說明clientwidth

獲取元素可視部分的寬度,即 css 的 width 和 padding 屬性值之和,元素邊框和滾動條不包括在內,也不包含任何可能的滾動區域

clientheight

獲取元素可視部分的高度,即 css 的 height 和 padding 屬性值之和,元素邊框和滾動條不包括在內,也不包含任何可能的滾動區域

offsetwidth

元素在頁面中佔據的寬度總和,包括 width、padding、border 以及滾動條的寬度

offsetheight

元素在頁面中佔據的高度總和,包括 height、padding、border 以及滾動條的寬度

scrollwidth

當元素設定了 overflow:visible 樣式屬性時,元素的總寬度,也稱滾動寬度。在預設狀態下,如果該屬性值大於 clientwidth 屬性值,則元素會顯示滾動條,以便能夠翻閱被隱藏的區域

scrollheight

當元素設定了 overflow:visible 樣式屬性時,元素的總高度,也稱滾動高度。在預設狀態下,如果該屬性值大於 clientwidth 屬性值,則元素會顯示滾動條,以便能夠翻閱被隱藏的區域

屬性或方法

說明getcomputedstyle(element)[style]

可以獲取元素的高度或者寬度

element.getboundingclientrect().style

可以獲取元素的高度,寬度,距離頂部,底部,左,右的距離和座標

屬性或方法

說明$(element).width();

可以獲取元素的寬度(不含小數)

$(element).height();

可以獲取元素的高度(不含小數)

$(element).offset()

獲取元素距離頂部和左部的距離(含小數)

JS裡獲取各種寬度,高度的簡介

有時候專案中會用到用js獲取元素位置來定位元素,首先通過說明scrollwidth,clientwidth,offsetwidth的關係。js獲取各種寬度 高度的簡單介紹 scrollheight 獲取物件的滾動高度。scrollleft 設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距...

JS取各種尺寸的方法

js取瀏覽器和網頁可見區高和寬 普通dom子元素的寬高獲取 document.getelementbyid 元素id名稱 style.width document.getelementbyid 元素id名稱 style.height 在 及其元素的css寬高獲取上的瀏覽器相容問題 對table進行b...

js 獲取DOM尺寸 位置

檢視滾動條的滾動位置 封裝相容性方法getscrolloffset function getscrolloffset else 檢視視覺化視窗的尺寸 document.documentelement.clientwidth clientheight document.body.clientwidth...