js获取浏览器宽度高度（整理）

Posted 2023-04-02 天马3798

在获取浏览器宽度的时候，许多时候需要考虑滚动条的存在。

一般情况作为前端获取浏览器宽度，主要是指获取body的宽度，可操作的可视范围宽度。

一、使用JQuery获取浏览器宽度
重点，jquery获取的宽度=浏览器的可视宽度-滚动条的宽度（如果有滚动条）

//JQuery 获取浏览器宽度 ：浏览器的可视宽度-滚动条的宽度(如果出现垂直方向滚动条)
var winWidth = $(window).width();

二、使用Js 获取浏览器宽度

● window.outerWidth： 浏览器宽度，包含了浏览器边框所以这种方式不常用。
● window.outerHeight： 浏览器高度
● window.innerWidth： 浏览器内页面可用宽度，此宽度包含了垂直滚动条的宽度(若存在)。
● window.innerHeight： 浏览器内页面可用高度，此高度包含了水平滚动条的高度(若存在)。
 

从window.resize 事件中获取浏览器宽度：

        $(window).resize(function (e) 

            //var innerWidth = e.currentTarget.innerWidth;
            var innerWidth = window.innerWidth;

           

Js操作DOM及获取浏览器高度以及宽度

1.获取网页可见区域的宽度：document.body.clientWidth ;

　　2.获取网页可见区域的高度：document.body.clientHeight;

　　3.获取 网页可见区域宽：document.body.offsetWidth; (包括边线的宽度) 

　　4.获取网页可见区域高：document.body.offsetHeight ;(包括边线的宽度) 

　　5.获取网页正文全文宽：document.body.scrollWidth ;

　　6.获取网页正文全文高：document.body.scrollHeight ;

　　7.获取网页被卷去的高：document.body.scrollTop ;

　　8.获取网页被卷去的左：document.body.scrollLeft ;

　　9.获取网页正文部分上：window.screenTop ;

　　11.获取网页正文部分左：window.screenLeft; 

　　12.获取屏幕分辨率的高：window.screen.height; 

　　13.获取屏幕分辨率的宽：window.screen.width ;

　　14.屏幕可用工作区高度：window.screen.availHeight 

　　15.屏幕可用工作区宽度：window.screen.availWidth