JS_js和jq获取屏幕高度、宽度的方法

刺骨的言语ヽ痛彻心扉 2022-11-07 13:20 26阅读 0赞

# 一、js部分 #

## 1.获取屏幕尺寸 ##

获取屏幕宽度：window.screen.width; //整个屏幕的宽度  
获取屏幕高度：window.screen.height; //整个屏幕的高度

## 2.获取可用工作区尺寸 ##

获取屏幕可用工作区域宽度：window.screen.availWidth; //pc端与上面两个一致，移动端除个别其他也一致（试一下即可）  
获取屏幕可用工作区域高度：window.screen.availHeight;

## 3.获取body的宽高（不含边框） ##

获取网页内body的宽度：document.body.clientWidth; //client不包括边框  
获取网页内body的高度：document.body.clientHeight;  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]

## 4.获取网页的宽高 ##

获取整个网页的宽度：document.body.scrollWidth  
获取整个网页的高度：document.body.scrollHeight

*  document.body.scrollHeight 为网页可见高度加上未显示的网页的高度（滚动条未显示部分）即整个网页的高度  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70 1]

## 5.获取body的宽高（含边框） ##

获取网页内body的宽度:document.body.offsetWidth //offset包括边框  
获取网页内body的高度:document.body.offsetHeight  
![在这里插入图片描述][20210312143723784.png]

## 6.获取元素到顶部的距离 ##

获取元素到顶部的距离：document.getElementsByClassName(“div”)\[0\].offsetTop  
获取元素到左边的距离：document.getElementsByClassName(“div”)\[0\].offsetLeft

## 7.获取滚动条到top和left的距离 ##

获取滚动条到顶部的距离：document.body.scrollTop / document.documentElement.scrollTop  
获取滚动条到左边的距离：document.body.scrollLeft / document.documentElement.scrollLeft

# 二、JQ部分 #

## 1、获取当前窗口浏览器宽高 ##

获取当前窗口浏览器可视区域宽度： ( w i n d o w ) . w i d t h ( ) ; 获 取 当 前 窗 口 浏 览 器 可 视 区 域 高 度 ： (window).width(); 获取当前窗口浏览器可视区域高度： (window).width();获取当前窗口浏览器可视区域高度：(window).height();

## 2、获取当前窗口文档高宽 ##

获取当前窗口文档宽度： ( d o c u m e n t ) . w i d t h ( ) ; 获 取 当 前 窗 口 文 档 高 度 ： (document).width(); 获取当前窗口文档高度： (document).width();获取当前窗口文档高度：(document).height();

## 3、获取当前窗口body高宽 ##

获取body宽度： ( d o c u m e n t . b o d y ) . w i d t h ( ) ; 获 取 b o d y 高 度 ： (document.body).width(); 获取body高度： (document.body).width();获取body高度：(document.body).height();

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]: /images/20221023/7c72f9713b164262b64fbbc9c1e42eec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70 1]: /images/20221023/8f0980ed3c7340e89e71967cb822c85f.png
[20210312143723784.png]: /images/20221023/67f9fddf754440d1bbc15bebb26cfdad.png