原生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 相关文章推荐
js Date概念详细介绍
Nov 22 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
js 只比较时间大小的实例
Oct 26 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
浅谈js闭包理解
Mar 28 Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 Javascript
基于vue.js实现购物车
Jan 15 Javascript
JS猜数字游戏实例讲解
Jun 30 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下实现伪 url 的超简单方法[转]
2007/09/24 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
Add a Formatted Table to a Word Document
2007/06/15 Javascript
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
乌鸦喝水教学反思
2014/02/07 职场文书
青蓝工程实施方案
2014/03/27 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS