JS獲取各種寬度 高度的簡單介紹

2021-08-19 21:51:18 字數 3209 閱讀 9996

scrollheight: 獲取物件的滾動高度。 

scrollleft:設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離

scrolltop:設定或獲取位於物件最頂端和視窗中可見內容的最頂端之間的距離

scrollwidth:獲取物件的滾動寬度

offsetheight:獲取物件相對於版面或由父座標 offsetparent 屬性指定的父座標的高度

offsetleft:獲取物件相對於版面或由 offsetparent 屬性指定的父座標的計算左側位置

offsettop:獲取物件相對於版面或由 offsettop 屬性指定的父座標的計算頂端位置

event.clientx 相對文件的水平座標

event.clienty 相對文件的垂直座標

event.offsetx 相對容器的水平座標

event.offsety 相對容器的垂直座標

document.documentelement

.scrolltop 垂直方向滾動的值

event.clientx+document.documentelement

.scrolltop 相對文件的水平座標+垂直方向滾動的量

以上主要指ie之中,firefox差異如下:

ie6.0、ff1.06+:

clientwidth = width + padding 

clientheight = height + padding

offsetwidth = width + padding + border

offsetheight = height + padding + border

ie5.0/5.5:

clientwidth = width - border 

clientheight = height - border

offsetwidth = width

offsetheight = height

(需要提一下:css中的margin屬性,與clientwidth、offsetwidth、clientheight、offsetheight均無關)

offsetwidth (width+padding+border)

假設 obj 為某個 html 控制項。

obj.offsettop 指 obj 距離上方或上層控制項的位置,整型,單位畫素。

obj.offsetleft 指 obj 距離左方或上層控制項的位置,整型,單位畫素。

obj.offsetwidth 指 obj 控制項自身的寬度,整型,單位畫素。獲取物件可見內容的寬度,不包括滾動條,不包括邊框;

obj.offsetheight 指 obj 控制項自身的高度,整型,單位畫素。

offsetwidth 與 style.width 的區別

一、offsettop 返回的是數字,而 style.top 返回的是字串,除了數字外還帶有單位:px。

二、offsettop 唯讀,而 style.top 可讀寫。

三、如果沒有給 html 元素指定過 top 樣式,則 style.top 返回的是空字串。

獲取瀏覽器顯示區域(可視區域)的高度 :   

$(window).height();

獲取瀏覽器顯示區域(可視區域)的寬度 :

$(window).width();

獲取頁面的文件高度

$(document).height();

獲取頁面的文件寬度 :

$(document).width();

瀏覽器當前視窗文件body的高度:

$(document.body).height();

瀏覽器當前視窗文件body的寬度:

$(document.body).width();

獲取滾動條到頂部的垂直高度 (即網頁被卷上去的高度)

$(document).scrolltop();

獲取滾動條到左邊的垂直寬度 :

$(document).scrollleft();

獲取或設定元素的寬度:

$(obj).width();

獲取或設定元素的高度:

$(obj).height();

某個元素的上邊界到body最頂部的距離:obj.offset().top

;(在元素的包含元素不含滾動條的情況下)

某個元素的左邊界到body最左邊的距離:obj.offset().left

;(在元素的包含元素不含滾動條的情況下)

返回當前元素的上邊界到它的包含元素的上邊界的偏移量:obj.offset().top(在元素的包含元素含滾動條的情況下)

返回當前元素的左邊界到它的包含元素的左邊界的偏移量:obj.offset().left(在元素的包含元素含滾動條的情況下)

js:

網頁被卷起來的高度/寬度(即瀏覽器滾動條滾動後隱藏的頁面內容高度)

document.documentelement

.scrolltop //firefox

document.documentelement

.scrollleft //firefox

document.body

.scrolltop //ie

document.body

.scrollleft //ie

複製**

等同於:

$(window).scrolltop()

$(window).scrollleft()

網頁工作區域的高度和寬度

document.documentelement

.clientheight// ie firefox

等同於:

$(window).height()

元素距離文件頂端和左邊的偏移值

obj.offsettop //ie firefox

obj.offsetleft //ie firefox

等同於:

obj.offset().top

obj.offset().left

JS獲取各種寬度 高度的簡單介紹

js獲取各種寬度 高度的簡單介紹 scrollheight 獲取物件的滾動高度。scrollleft 設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離 scrolltop 設定或獲取位於物件最頂端和視窗中可見內容的最頂端之間的距離 scrollwidth 獲取物件的滾動寬度 offse...

JS獲取各種寬度 高度的簡單介紹

js獲取各種寬度 高度的簡單介紹 scrollheight 獲取物件的滾動高度。scrollleft 設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離 scrolltop 設定或獲取位於物件最頂端和視窗中可見內容的最頂端之間的距離 scrollwidth 獲取物件的滾動寬度 offse...

JS獲取各種寬度 高度的簡單介紹

js獲取各種寬度 高度的簡單介紹 scrollheight 獲取物件的滾動高度。scrollleft 設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離 scrolltop 設定或獲取位於物件最頂端和視窗中可見內容的最頂端之間的距離 scrollwidth 獲取物件的滾動寬度 offse...