<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取各类宽高</title>
<script src='../jquery-3.1.1.min.js'></script>
<script>
$(function(){
//浏览器当前窗口可视区域高度
console.log($(window).height());
console.log($(window).width());
//浏览器当前窗口文档的高度
console.log($(document.body).height());
console.log($(document.body).width());
//浏览器的总高度包括padding border
console.log($(document.body).outerHeight(true));
console.log($(document.body).outerWidth(true));
});
</script>
</head>
<body>
</body>
</html>
1、获取实际内容区域的宽和高：width()和height();
2、获取实际内容区域+padding的宽和高：innerWidth()和innerHeight();
3、获取实际内容区域+padding+border的宽和高：outerWidth()和outerHeight();
4、获取实际内容区域+padding+border+margin的宽和高：outerWidth(true)和outerHeight(true)