Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >JavaScript、Jquery获取屏幕的宽度和高度

JavaScript、Jquery获取屏幕的宽度和高度

作者头像
德顺
发布于 2019-11-13 09:20:17
发布于 2019-11-13 09:20:17
5.5K00
代码可运行
举报
文章被收录于专栏:前端资源前端资源
运行总次数:0
代码可运行

在日常的项目中经常需要获取屏幕的宽度或者高度,简单记录一下:

Javascript方法获取:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
document.body.clientWidth //网页可见区域宽
document.body.clientHeight //网页可见区域高
document.body.offsetWidth //网页可见区域宽(包括边线的宽)
document.body.offsetHeight //网页可见区域高(包括边线的高)
document.body.scrollWidth //网页正文全文宽
document.body.scrollHeight //网页正文全文高
document.body.scrollTop //网页被卷去的高
document.body.scrollLeft //网页被卷去的左
window.screenTop //网页正文部分上
window.screenLeft //网页正文部分左
window.screen.height //屏幕分辨率的高
window.screen.width //屏幕分辨率的宽
window.screen.availHeight //屏幕可用工作区高度
window.screen.availWidth //屏幕可用工作区宽度

JQuery方法获取:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
($(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
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-06-14),如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
clientWidth、offsetWidth等介绍[通俗易懂]
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scrollTop 网页被卷去的左:document.body.scrollLeft 网页正文部分上:window.screenTop 网页正文部分左:window.screenLeft 屏幕分辨率的高:window.screen.height 屏幕分辨率的宽:window.screen.width 屏幕可用工作区高度:window.screen.availHeight 屏幕可用工作区宽度:window.screen.availWidth
全栈程序员站长
2022/09/16
6500
js 获取屏幕各种宽高的方法(浏览器兼容)
屏幕的有效宽高: window.screen.availHeight window.screen.availWidth 网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:document.body.offsetWidth (包括边线的宽)  网页可见区域高:document.body.offsetHeight (包括边线的宽)  网页正文全文宽:document.body.scrollWidth  网
Sindsun
2018/04/28
3.6K0
JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth「建议收藏」
在我本地测试当中: 在IE、FireFox、Opera下都可以使用 document.body.clientWidth document.body.clientHeight 即可获得,很简单,很方便。 而在公司项目当中: Opera仍然使用 document.body.clientWidth document.body.clientHeight 可是IE和FireFox则使用 document.documentElement.clientWidth document.documentElement.clientHeight 原来是W3C的标准在作怪啊
全栈程序员站长
2022/09/16
7.7K0
JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth「建议收藏」
js获取屏幕以及元素宽高的方法
一.window相关 网页正文部分上:window.screenTop 网页正文部分左:window.screenLeft 屏幕分辨率的高:window.screen.height 屏幕分辨率的宽:window.screen.width 屏幕可用工作区高度:window.screen.availHeight 屏幕可用工作区宽度:window.screen.availWidth 二.body相关 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.
小小咸鱼YwY
2020/06/19
7K0
JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度(转)
网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:document.body.offsetWidth (包括边线的宽)  网页可见区域高:document.body.offsetHeight (包括边线的宽)  网页正文全文宽:document.body.scrollWidth  网页正文全文高:document.body.scrollHeight  网页被卷去的高:document.body.scrollTop  网页被卷去的左:document.body.scrollLeft  网页正文部分上:window.screenTop  网页正文部分左:window.screenLeft  屏幕分辨率的高:window.screen.height  屏幕分辨率的宽:window.screen.width  屏幕可用工作区高度:window.screen.availHeight  屏幕可用工作区宽度:window.screen.availWidth  HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth  scrollHeight: 获取对象的滚动高度。  scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  scrollWidth:获取对象的滚动宽度  offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度  offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置  offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置  event.clientX 相对文档的水平座标  event.clientY 相对文档的垂直座标  event.offsetX 相对容器的水平坐标  event.offsetY 相对容器的垂直坐标  document.documentElement.scrollTop 垂直方向滚动的值  event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量  IE,FireFox 差异如下:  IE6.0、FF1.06+:  clientWidth = width + padding  clientHeight = height + padding  offsetWidth = width + padding + border  offsetHeight = height + padding + border  IE5.0/5.5:  clientWidth = width - border  clientHeight = height - border  offsetWidth = width  offsetHeight = height  (需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
山河木马
2019/03/05
16.4K0
html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍(转)
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
山河木马
2019/03/05
7.9K0
html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍(转)
web前端开发初学者十问集锦(4)
利用JS来控制页面控件的显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位。
恋喵大鲤鱼
2018/08/03
1.4K0
javascript 获取多种主流浏览器显示页面高度(转)
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 FireFox中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 Opera中:  document.body.clientWidth ==> 可见区域宽度 document.body.clientHeight ==> 可见区域高度 document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) 没有定义W3C的标准,则 IE为: document.documentElement.clientWidth ==> 0 document.documentElement.clientHeight ==> 0 FireFox为: document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) Opera为: document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
lin_zone
2018/08/15
1K0
js、jQuery 获取文档、窗口、元素的各种值
浏览器当前窗口文档body的宽度: document.body.clientWidth;(仅仅是body的width) 浏览器当前窗口文档body的高度: document.body.clientHeight;(仅仅是body的height)
Krry
2018/09/10
14.5K0
js获取页面宽高
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth(包括边线的宽) 网页可见区域高:document.body.offsetHeight(包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scrollTop(I
SpiritLing
2018/04/16
8K0
盘点JavaScript中那些进阶操作知识(下篇)
相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会JavaScript,因为它对做网页方面是有很大作用的。
前端皮皮
2021/09/14
4460
JS滑动滚动的n种方式
scrollIntoView对页面元素调用,会滚动元素的父容器,将该元素滚动到浏览器的可视区域
源心锁
2022/08/12
6.8K0
JS滑动滚动的n种方式
js 获取浏览器高度和宽度值(多浏览器)
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 FireFox中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 Opera中: document.body.clientWidth ==> 可见区域宽度 document.body.clientHeight ==> 可见区域高度 document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) 没有定义W3C的标准,则 IE为: document.documentElement.clientWidth ==> 0 document.documentElement.clientHeight ==> 0 FireFox为: document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) Opera为: document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
似水的流年
2018/01/12
7.8K0
vue里监听页面滚动的问题
网页可见区域宽: document.body.offsetWidth(包括边线的宽);
用户1065635
2019/03/21
3.4K0
javascript坐标:event.x、event.clientX、event.offsetX、event.screenX 用法
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
大道七哥
2019/09/10
1.8K0
offsetWidth,clientWidth的区别
包括元素的宽度、可见的垂直滚动条宽度、左边框高度和右边框高度
全栈程序员站长
2022/09/16
7280
浏览器中的几个高度
载入首批数据,文档高度( $('html').height() == 2500px )
Z4
2020/04/21
1.9K0
Js窗体window大小设置(转)
网页可见区域宽:document.body.offsetWidth (包括边线的宽) 
山河木马
2019/03/05
6.3K0
JavaScript获取高度和宽度
屏幕分辨率为:screen.width screen.height 屏幕可用大小:screen.availWidth screen.availHeight 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽(包括边线的宽):document.body.offsetWidth 网页可见区域高(包括边线的宽):document.body.offsetHeight 网页正文全文宽:document.b
苦咖啡
2018/05/07
3.9K0
jQuery实现图片懒加载
一、懒加载 1.什么是懒加载 目前,网络上各大论坛,尤其是一些图片类型的网站上,在图片加载时均采用了一种名为懒加载的方式,具体表现为,当页面被请求时,只加载可视区域的图片,其它部分的图片则不加载,只有这些图片出现在可视区域时才会动态加载这些图片,从而节约了网络带宽和提高了初次加载的速度。 2.懒加载的原理 页面中的img元素,如果没有src属性,浏览器就不会发出请求去下载图片,只有通过javascript设置了图片路径,浏览器才会发送请求。 懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位,
小胖
2018/06/27
13.9K0
推荐阅读
相关推荐
clientWidth、offsetWidth等介绍[通俗易懂]
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档