<!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)