關於Bom下標準模式和混雜模式!

能夠經過document.compatMode =="CSS1Compat"判斷是混雜模式仍是標準模式,當等於CSS1Compat的時候,web

就是標準模式,而BackCompat則是混雜模式。數組

注意:若是是在移動端,移動端中是沒有IE的,因此能夠經過window去取視口大小例如:window.innerWidth瀏覽器

(1)、可視區寬度和高度。框架

  獲取瀏覽器窗口尺寸(瀏覽器的視口,不包括工具欄和滾動條)的方法:工具

  ①、IE9以上及如今瀏覽器都支持:post

  window.innerWidth  獲取瀏覽器窗口的內部寬度。對象

  window.innerHeight  獲取瀏覽器窗口的內部高度。文檔

  ②、對於IE9以前能夠用:io

  document.documentElement.clientWidth  表示HTML文檔所在窗口的當前寬度。
  document.documentElement.clientHeight  表示HTML文檔所在窗口的當前高度。容器

  或者能夠使用:

  Document對象的body屬性對應HTML文檔的<body>標籤

  document.body.clientWidth  
  document.body.clientHeight

(2)、實際網頁尺寸。

  scrollHeight和scrollWidth,獲取網頁內容高度和寬度。

  scrollHeight和scrollWidth還可獲取DOM元素中內容實際佔用的高度和寬度。

  在IE下scrollHeight 是網頁內容實際高度,能夠小於clientHeight。在FF下scrollHeight 是網頁內容高度,不過最小值是 clientHeight。

      也就是說網頁內容實際高度小於 clientHeight 時,scrollHeight返回 clientHeight 

(3)、包含滾動條的網頁尺寸。

  offsetHeight和offsetWidth,獲取網頁內容高度和寬度(包括滾動條等邊線,會隨窗口的顯示大小改變)。

  offsetHeight = clientHeight(內容可視區高度) + 滾動條 + 邊框。

(4)、滾動距離

  所謂滾動距離,就是可視區距離頁面頂部滾動了多遠,也叫網頁捲去的距離。

  scrollTop:設置或獲取位於對象最頂端與窗口中可見內容的最頂部之間的距離 ,也就是網頁被滾動的高度。

  scrollLeft:設置或獲取位於給定對象左邊界與窗口中目前可見內容的最左端之間的距離,也就是網頁被滾動的寬度。

  offsetTop:獲取指定對象相對於版面或由 offsetParent 屬性指定的父座標的計算頂部位置,當前對象到其上級頂部的距離,或者距離頁面頂部的距離。

  offsetLeft:獲取指定對象相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置 ,當前對象到其上級左端的距離,或者距離頁面左端的距離。

  offsetTop和offsetLeft不能賦值,設置對象到頁面頂部的距離可用style.top屬性,設置對象到頁面左部的距離請用style.left屬性。

  offsetParent:頁面中設置postion屬性(relative、absolute、fixed)的父容器,從最近的父節點開始,一層層向上找,直到HTML的body。該屬性用於獲取一個元素用於定位的父級,語法:obj.offsetParent

  window的六大屬性,同時它們也是對象:

  document主要操做web加載的網頁文檔;

  frames爲窗口框架對象數組;

  history保存用戶上網記錄;

  location提供加載的文檔有關信息以及控制頁面跳轉;

  navigator對象存儲瀏覽器名稱及版本信息;

  screen顯示屏幕相關信息。

相關文章
相關標籤/搜索