js獲取某個元素距離瀏覽器的邊距

2021-09-11 23:44:25 字數 1243 閱讀 4579

1.偏移參照(offsetparent):

在理解偏移大小之前,首先要理解offsetparent。人們並沒有把offsetparent翻譯為偏移父級,而是翻譯成定位父級,很大原因是offsetparent與定位有關

定位父級offsetparent的定義是:與當前元素最近的經過定位(position不等於static)的父級元素,主要分為下列幾種情況 

元素自身有fixed定位,offsetparent的結果為null

當元素自身有fixed固定定位時,我們知道固定定位的元素相對於視口進行定位,此時沒有定位父級,offsetparent的結果為null

元素自身無fixed定位,且父級元素都未經過定位,offsetparent的結果為

元素自身無fixed定位,且父級元素存在經過定位的元素,offsetparent的結果為離自身元素最近的經過定位的父級元素

元素的parentnode是null

2.偏移量(offset dimension):

涉及到偏移量的主要是offsetleft、offsettop、offsetheight、offsetwidth這四個屬性。

offsetwidth

offsetwidth表示元素在水平方向上占用的空間大小,無單位(以畫素px計)

offsetheight

offsetheight表示元素在垂直方向上占用的空間大小,無單位(以畫素px計)

[注意]如果存在垂直滾動條,offsetwidth也包括垂直滾動條的寬度;如果存在水平滾動條,offsetheight也包括水平滾動條的高度

offsettop

offsettop表示元素的上外邊框至offsetparent元素的上內邊框之間的畫素距離

offsetleft

offsetleft表示元素的左外邊框至offsetparent元素的左內邊框之間的畫素距離

我們可以先獲取它的offset它這是相對父容器的距離。然後使用遞迴來層層獲取上一級的offset。

var getoffsetleft = function(obj)

return tmp;

}var getoffsettop =  function(obj)

return tmp;

}

js獲取瀏覽器滾動條距離頂端的距離

一 jquery獲取的相關方法 jquery 獲取滾動條高度 獲取瀏覽器顯示區域的高度 window height 獲取瀏覽器顯示區域的寬度 window width 獲取頁面的文件高度 document height 獲取頁面的文件寬度 document width 獲取滾動條到頂部的垂直高度 d...

關於js獲取瀏覽器以及元素的高度

網頁可見區域寬 document.body.clientwidth 網頁可見區域高 document.body.clientheight 網頁可見區域寬 document.body.offsetwidth 包括邊線的寬 網頁可見區域高 document.body.offsetheight 包括邊線的...

JS獲取瀏覽器資訊

本機執行結果 瀏覽器 microsoft internet explorer 瀏覽器版本 4.0 compatible msie 6.0 windows nt 5.1 sv1 qqdownload 1.7 infopath.2 net clr 2.0.50727 net clr 3.0.04506....