1. 程式人生 > >關於window.innerHeight/innerWidth,document.documentElement.clientWidth/Height,document.body.clientWidth/Height

關於window.innerHeight/innerWidth,document.documentElement.clientWidth/Height,document.body.clientWidth/Height

一、window.innerWidth/Height  =>  獲取瀏覽器可視區域寬/高度

========①寬度:經測試,該屬性獲取的是包含滾動條寬度的(有的部落格乃至菜鳥教程都認為他不包含)瀏覽器可視區域寬度②高度:但是高度卻不包含工具欄高度,只是可視區域高度②IE 8 及更早 IE版本不支援這兩個屬性。===================

二、document.documentElement.clientWidth/Height  =>  獲取瀏覽器可視區域寬/高度  //document.documentElement指的是html

========①寬度:瀏覽器可視區域寬度(不包括滾動條區域寬度)②高度:瀏覽器可視區域高度(不包含工具欄高度)①相容ie8及更早ie版本=========================

三、document.body.clientWidth/Height  =>  獲取body的寬/高(除去margin)   //document.body指的是body元素

========①寬度:body文件實際寬度(不包含滾動條區域寬度)②高度:body文件實際高度(不包含工具欄高度)============================

經驗證得出以下結論:

  ①document.documentElement.clientHeight 和 window.innerHeight 是相等的,但是寬度差個滾動條寬度;

  ②document.documentElement.clientWidth/Height 和 window.innerWIdth/innerHeight 都是獲取瀏覽器可視區域的寬高。其大小隨瀏覽器縮放變化,不因body邊距變化;

  ③document.body.clientWidth/Height 獲取的是body實際寬高,不包括滾動條及工具欄寬高,其大小隨body元素實際寬高變化而變化。

  

以上是小弟自己總結實驗隨筆,實驗環境有限,如有不妥,請見諒。最後,網傳的相容方法獻上,具體怎麼用,根據實際情況:

var w = document.documentElement.clientWidth ||  document.body.clientWidth;

var h = document.documentElement.clientHeight || document.body.clientHeight;