原生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 相关文章推荐
jquery 圆形旋转图片滚动切换效果
Jan 19 Javascript
JavaScript基于ajax编辑信息用法实例
Jul 15 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
JavaScript数据结构链表知识详解
Nov 21 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
Oct 17 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
小程序开发之模态框组件封装
Apr 23 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 第二节 数据类型之数值型
2012/04/28 PHP
php中长文章分页显示实现代码
2012/09/29 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
jQuery获取cookie值及删除cookie用法实例
2016/04/15 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
python提取页面内url列表的方法
2015/05/25 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
Python运行异常管理解决方案
2020/03/09 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
python怎么提高计算速度
2020/06/11 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
镇创先争优活动总结
2014/08/28 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
绿色环保倡议书
2015/04/28 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
2015年教师节新闻稿
2015/07/17 职场文书