JavaScript常用獲取寬高的方法


知識點:

  • document.documentElement.scrollTop(滾動條頂端位置,支持ie、ff)
  • document.body.scrollTop(滾動條頂端位置,支持chrome)
  • document.documentElement.clientWidth(瀏覽器視口寬度)
  • document.documentElement.clientHeight(瀏覽器視口高度)
  • document.body.clientWidth(瀏覽器視口寬度)
  • document.body.clientHeight(瀏覽器視口高度)
  • document.documentElement.scrollWidth(獲取頁面的寬度)
  • document.documentElement.scrollHeight(獲取頁面的高度)
  • document.body.scrollWidth(獲取頁面的寬度)
  • document.body.scrollHeight(獲取頁面的高度)
  • document.getElementById("box").offsetWidth(獲取元素的寬度)
  • document.getElementById("box").offsetHeight(獲取元素的高度)

以頂部的距離為例:

1、沒有文檔聲明(已廢棄使用)的情況下:

標准與非標准瀏覽器都認識document.documentElement.scrollTop和document.body.scrollTop

2、有文檔聲明(即網頁第一句的docType)的情況下:

標准瀏覽器只認識document.documentElement.scrollTop,而不認識document.body.scrollTop

但是chrome雖然我感覺比firefox還標准,但卻不認識這個,在有文檔聲明時,chrome也只認識document.document.body.scrollTop。這就出現了一種技巧性的兼容方法,把兩個加起來:

var oSTop=document.documentElement.scrollTop+document.body.scrollTop;

其他的類似,這個小技巧很使用,但是與寬有關的不需要加起來,並且習慣使用規范的document.documentElement.xxxxWidth。

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com