编程 Javascript

原生js获取浏览器窗口及元素宽高常用方法集合

Posted in Javascript onJanuary 18, 2017

窗口可视区域宽度： document.documentElement.clientWidth || document.body.clientWidth;

窗口可视区域高度： document.documentElement.clientHeight || document.body.clientHeight;

窗口可视区域宽度+边线和滚动条： document.body.offsetWidth ;

窗口可视区域高度+边线和滚动条： document.body.offsetHeight ;

实际内容的宽度： document.body.scrollWidth;

实际内容的高度： document.body.scrollHeight;

滚动条下拉被卷起来的距离：document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

滚动条侧拉被卷起来的距离：document.body.scrollLeft || document.documentElement.scrollLeft ;

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

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

元素的宽度：obj.offsetWidth;

元素的高度：obj.offsetHeight;

相对于父元素的上位移：obj.offsetTop;（在元素的包含元素不含滚动条的情况下）

相对于父元素的左位移：obj.offsetLeft;（在元素的包含元素不含滚动条的情况下）

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

原生js获取浏览器窗口及元素宽高常用方法集合

- Author -

夏天不做梦

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript 操作键盘的Enter事件（键盘任何事件），兼容多浏览器

Oct 11 Javascript

JS刷新框架外页面七种实现代码

Feb 18 Javascript

jquery删除指定的html标签并保留标签内文本内容的方法

Apr 02 Javascript

手机号码，密码正则验证

Sep 04 Javascript

Javascript节点关系实例分析

May 15 Javascript

JavaScript驾驭网页－DOM

Mar 24 Javascript

微信公众号开发自定义菜单跳转页面并获取用户信息实例详解

Dec 08 Javascript

实例解析js中try、catch、finally的执行规则

Feb 24 Javascript

vue通过点击事件读取音频文件的方法

May 30 Javascript

微信小程序页面间传值与页面取值操作实例分析

Apr 30 Javascript

vue history 模式打包部署在域名的二级目录的配置指南

Jul 02 Javascript

微信小程序实现下拉加载更多商品

Dec 29 Javascript

基于JavaScript实现窗口拖动效果

Jan 18 #Javascript

原生js实现节日时间倒计时功能

Jan 18 #Javascript

原生js实现返回顶部缓冲效果

Jan 18 #Javascript

详解jquery validate实现表单验证（正则表达式）

Jan 18 #Javascript

原生js实现中奖信息无间隙滚动效果

Jan 18 #Javascript

js实现简单的网页换肤效果

Jan 18 #Javascript

EasyUI修改DateBox和DateTimeBox的默认日期格式示例

Jan 18 #Javascript

You might like

php&java（三）

2006/10/09 PHP

php购物网站支付paypal使用方法

2010/11/28 PHP

PHP Undefined index报错的修复方法

2011/07/17 PHP

php方法调用模式与函数调用模式简例

2011/09/20 PHP

php时间戳格式化显示友好的时间函数分享

2014/10/21 PHP

php字符串函数学习之strstr()

2015/03/27 PHP

PHP的Yii框架的常用日志操作总结

2015/12/08 PHP

探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行

2013/07/09 Javascript

jQuery截取指定长度字符串代码

2014/08/21 Javascript

jQuery中:not选择器用法实例

2014/12/30 Javascript

js实现iGoogleDivDrag模块拖动层拖动特效的方法

2015/03/04 Javascript

JavaScript实现图片轮播的方法

2015/07/31 Javascript

jQuery+css3实现文字跟随鼠标的上下抖动

2015/07/31 Javascript

jquery代码实现多选、不同分享功能

2015/07/31 Javascript

javascript拖拽应用实例

2016/03/25 Javascript

利用JS实现页面删除并重新排序功能

2016/12/09 Javascript

完美解决浏览器跨域的几种方法(汇总)

2017/05/08 Javascript

vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】

2018/08/29 Javascript

在vue中获取token,并将token写进header的方法

2018/09/26 Javascript

Vue.js实现开发购物车功能的方法详解

2019/02/22 Javascript

微信小程序Page中data数据操作和函数调用方法

2019/05/08 Javascript

Vue快速实现通用表单验证的方法

2020/02/24 Javascript

Python去除列表中重复元素的方法

2015/03/20 Python

Python基于列表list实现的CRUD操作功能示例

2018/01/05 Python

如何使用Python的Requests包实现模拟登陆

2018/04/27 Python

在PyCharm中实现关闭一个死循环程序的方法

2018/11/29 Python

python中seaborn包常用图形使用详解

2019/11/25 Python

Python concurrent.futures模块使用实例

2019/12/24 Python

如何用css3实现switch组件开关的方法

2018/02/09 HTML / CSS

Sixt美国租车：高端豪华车型自驾体验

2017/09/02 全球购物

德国家具购物网站：Möbel Höffner

2019/08/26 全球购物

新娘父亲婚礼致辞

2014/01/16 职场文书

护士自我鉴定怎么写

2014/02/07 职场文书

文秘个人求职信范文

2014/04/22 职场文书

学校远程教育工作总结

2015/08/11 职场文书

如何利用Python实现n*n螺旋矩阵

2022/01/18 Python