標籤:
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <script src="jq/js/jquery-2.0.3.js"></script> <style> body{height: 1000px;margin:20px 0;padding:15px 0;border: 10px solid red;} </style> <script> $(function(){ //瀏覽器當前視窗可視地區高度 console.log($(window).height()) console.log(document.documentElement.clientHeight) //瀏覽器當前視窗文檔的高度 console.log($(document).height()) //body+margin+padding+border 1000+40+30+20=1090 console.log($(document.body).height()) //body 1000 console.log(‘document.body.offsetHeight===‘+document.body.offsetHeight )//body+padding+border 1000+30+20=1050 console.log(‘document.body.clientHeight===‘+document.body.clientHeight) //body+padding 1000+30=1030 //網頁被捲去的高 IE兩個都為0 console.log(document.documentElement.scrollTop) //FF支援 chrome為0 console.log(document.body.scrollTop)//chrome 支援 FF為0 console.log(document.documentElement.scrollTop+document.body.scrollTop) //網頁被捲去的高 jQuery console.log($(document).scrollTop()) }) </script></head><body> </body></html>
文檔高度和捲去的高度