编程 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 URL锚点取值方法

Feb 25 Javascript

js动态调用css属性的小规律及实例说明

Dec 28 Javascript

Angularjs使用ng-repeat中$even和$odd属性的注意事项

Dec 31 Javascript

使用jQuery的load方法设计动态加载及解决被加载页面js失效问题

Mar 01 Javascript

jQuery中layer分页器的使用

Mar 13 Javascript

为你的微信小程序体积瘦身详解

May 20 Javascript

Ionic3 UI组件之autocomplete详解

Jun 08 Javascript

JavaScript输出所选择起始与结束日期的方法

Jul 12 Javascript

详谈for循环里面的break和continue语句

Jul 20 Javascript

bootstrap table插件动态加载表头

Jul 19 Javascript

JS实现横向跑马灯效果代码

Apr 20 Javascript

JS实现移动端可折叠导航菜单（现代都市风）

Jul 07 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 array_push 数组函数

2009/12/26 PHP

php 强制下载文件实现代码

2013/10/28 PHP

php去除头尾空格的2种方法

2015/03/16 PHP

Yii2中YiiBase自动加载类、引用文件方法分析(autoload)

2016/07/25 PHP

对laravel的session获取与存取方法详解

2019/10/08 PHP

10个新的最有前途的JavaScript框架

2009/03/12 Javascript

JavaScript中的一些定位属性[图解]

2010/07/14 Javascript

基于jquery的内容循环滚动小模块（仿新浪微博未登录首页滚动微博显示）

2011/03/28 Javascript

jquery实现每个数字上都带进度条的幻灯片

2013/02/20 Javascript

Javascript之this关键字深入解析

2013/11/12 Javascript

jQuery晃动层特效实现方法

2015/03/09 Javascript

JavaScript实现的字符串replaceAll函数代码分享

2015/04/02 Javascript

jQuery实现鼠标滑过点击事件音效试听

2015/08/31 Javascript

BootStrap中Tab页签切换实例代码

2016/05/30 Javascript

老生常谈Javascript中的原型和this指针

2016/10/09 Javascript

vue 挂载路由到头部导航的方法

2017/11/13 Javascript

微信小程序结合mock.js实现后台模拟及调试

2019/03/28 Javascript

Vue实现按钮级权限方案

2019/11/21 Javascript

Python 匹配任意字符（包括换行符）的正则表达式写法

2009/10/29 Python

如何利用Boost.Python实现Python C/C++混合编程详解

2018/11/08 Python

对python:threading.Thread类的使用方法详解

2019/01/31 Python

Python OpenCV中的resize()函数的使用

2019/06/20 Python

python实现数据分析与建模

2019/07/11 Python

Python单链表原理与实现方法详解

2020/02/22 Python

浅谈Html5移动端ios/Android兼容性总结

2018/06/01 HTML / CSS

优衣库英国官网：UNIQLO英国

2016/12/25 全球购物

ColourPop美国官网：卡拉泡泡，洛杉矶彩妆品牌

2019/04/28 全球购物

Java如何格式化日期

2012/08/07 面试题

linux面试题参考答案（7）

2014/07/24 面试题

生产厂厂长岗位职责

2013/12/25 职场文书

超市中秋节活动方案

2014/02/12 职场文书

党员入党表决心的话

2014/03/11 职场文书

如何撰写一封出色的求职信

2014/04/27 职场文书

2015年干部教育培训工作总结

2015/05/15 职场文书

圆明园纪录片观后感

2015/06/03 职场文书

面试必问:圣杯布局和双飞翼布局的区别

2021/05/13 HTML / CSS