浏览器抓取网页(获取高度和宽度都各有3种，如何解决各种计算定位问题 )

　　浏览器抓取网页(获取高度和宽度都各有3种，如何解决各种计算定位问题

)

　　目的

　　在浏览器中，JS获取的高度和宽度有3种，分别是屏幕、浏览器和网页。用于解决各种计算定位问题！以至于各种事情都记不起来了，所以我可以写一篇文章，方便查询。

　　屏幕宽度

　　注：顾名思义，屏幕宽度和高度是指显示器的分辨率。系统分辨率可以更改此宽度和高度。

　　获取方法：

　　console.log(\'宽度：\', window.screen.width)

console.log(\'高度：\', window.screen.height)

　　浏览器可用工作区的宽度和高度

　　注意：浏览器的宽度和高度是指浏览器窗口最大化时的宽度和高度。正常最大化后，一般去掉系统任务栏的高度，宽度和屏幕宽度一致。当任务栏占用的空间发生变化时，宽度和高度也会发生变化。

　　获取方法：

　　console.log(\'宽度：\', window.screen.availWidth)

console.log(\'高度：\', window.screen.availHeight)

　　页面宽度和高度

　　注意：网页的宽度和高度是指页面所占的宽度和高度。页面内容以*敏*感*词*，只计入网页内容区域。

　　获取方法：

　　console.log(\'宽度：\', window.innerWidth)

console.log(\'高度：\', window.innerHeight)

　　其他（获取浏览器和屏幕的各种高度和宽度）

　　js原生方法：

　　document.body.clientWidth; //网页可见区域宽(body)

document.body.clientHeight; //网页可见区域高(body)

document.body.offsetWidth; //网页可见区域宽(body)，包括border、margin等

document.body.offsetHeight; //网页可见区域宽(body)，包括border、margin等

document.body.scrollWidth; //网页正文全文宽，包括有滚动条时的未见区域

document.body.scrollHeight; //网页正文全文高，包括有滚动条时的未见区域

document.body.scrollTop; //网页被卷去的Top(滚动条)

document.body.scrollLeft; //网页被卷去的Left(滚动条)

window.screenTop; //浏览器距离Top

window.screenLeft; //浏览器距离Left

　　jQuery方法：

　　$(window).height(); //浏览器当前窗口可视区域高度

$(document).height(); //浏览器当前窗口文档的高度

$(document.body).height(); //浏览器当前窗口文档body的高度

$(document.body).outerHeight(true); //浏览器当前窗口文档body的总高度 包括border padding margin

$(window).width(); //浏览器当前窗口可视区域宽度

$(document).width(); //浏览器当前窗口文档对象宽度

$(document.body).width(); //浏览器当前窗口文档body的宽度

$(document.body).outerWidth(true); //浏览器当前窗口文档body的总宽度 包括border padding margin