原生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;(在元素的包含元素不含滚动条的情况下)

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

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