因為浏覽器的兼容問題,如果使用javascript獲取這些數值是一個相當痛苦的過程。好在JQuery提供了簡單優雅,並且兼容的解決方法。
獲取浏覽器和頁面文檔的寬度和高度
代碼如下:
//獲取浏覽器顯示區域的高度
$(window).height();
//獲取浏覽器顯示區域的寬度
$(window).width();
//獲取頁面的文檔高度
$(document.body).height();
//獲取頁面的文檔寬度
$(document.body).width();
獲取滾動條的位置
代碼如下:
//獲取滾動條到頂部的垂直高度
$(document).scrollTop();
//獲取滾動條到左邊的垂直寬度
$(document).scrollLeft();
計算位置和偏移量
offset方法是一個很有用的方法,它返回包裝集中第一個元素的偏移信息。默認情況下是相對body的偏移信息。結果包含top和left兩個屬性。
offset(options, results)
options.relativeTo 指定相對計算偏移位置的祖先元素。這個元素應該是relative或absolute定位。省略則相對body。
options.scroll 是否把滾動條計算在內,默認TRUE
options.padding 是否把padding計算在內,默認false
options.margin 是否把margin計算在內,默認true
options.border 是否把邊框計算在內,默認true