頁面裡各種高度,寬度,距離

2021-08-16 18:41:07 字數 1221 閱讀 4288

top高度距離left左邊距離right右邊距離

widthheight

先看清!

紫色的線就是scrolltop滾動條的滑動距離

var t=document.documentelement.scrolltop||document.body.scrolltop;

documentelement 和 body 相關說明:

body是dom物件裡的body子節點,即 標籤; documentelement 是整個節點樹的根節點root,即 標籤; dom把層次中的每乙個物件都稱之為節點,就是乙個層次結構,你可以理解為乙個樹形結構,就像我們的目錄一樣,乙個根目 錄,根目錄下有子目錄,子目錄下還有子目錄。 以 html超文字標記語言為例:整個文件的乙個根就是,在dom中可以使用document.documentelement來訪問它,它就是整個節點樹的 根節點。而body是子節點,要訪問到body標籤,在指令碼中應該寫:document.body。

藍色的線就是clienthight可視區的高

棕色的線就是offsetheight內容的實際高度不帶px;

ie、opera 認為 offsetheight = clientheight + 滾動條 + 邊框。

ns、ff 認為 offsetheight 是內容實際高度,可以小於 clientheight。

這幾個距離總結下,防止忘記。

用clientheight的時候 必須document.body.clientheight

scrollheight是元素的padding加元素內容的高度。這個高度與滾動條無關,是內容的實際高度。

計算方式 :scrollheight = toppadding + bottompadding + 內容margix box的高度。

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

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

js獲取頁面高度寬度

關於獲取各種瀏覽器可見視窗大小的一點點研究。在我本地測試當中 在ie firefox opera下都可以使用 document.body.clientwidth document.body.clientheight即可獲得,很簡單,很方便。而在公司專案當中 opera仍然使用 document.bo...

Javascript頁面寬度高度

關於獲取各種瀏覽器可見視窗大小的一點點研究 在我本地測試當中 在ie firefox opera下都可以使用 document.body.clientwidth document.body.clientheight 即可獲得,很簡單,很方便。而在公司專案當中 opera仍然使用 document.b...