原生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取id有.的值的方法
May 21 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
BootStrap glyphicons 字体图标实现方法
May 01 Javascript
关于JavaScript 原型链的一点个人理解
Jul 31 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
vue中使用element-ui进行表单验证的实例代码
Jun 22 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
vue data引入本地图片的两种方式小结
Nov 13 Javascript
vue基于v-charts封装双向条形图的实现代码
Dec 09 Javascript
JavaScript实现飞舞的泡泡效果
Feb 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
我常用的几个类
2006/10/09 PHP
php json与xml序列化/反序列化
2013/10/28 PHP
php strnatcmp()函数的用法总结
2013/11/27 PHP
JavaScript修改css样式style
2008/04/15 Javascript
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
js报错 Object doesn't support this property or method的原因分析
2011/03/31 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
Vue使用vue-cli创建项目
2017/09/01 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
python字典序问题实例
2014/09/26 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
超简单的Python HTTP服务
2019/07/22 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
详解Python 中的容器 collections
2020/08/17 Python
python 模拟登陆163邮箱
2020/12/15 Python
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
墨西哥网上超市:Superama
2018/07/10 全球购物
班长自荐书范文
2014/02/11 职场文书
2014年清明节寄语
2014/04/03 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
关于开学的感想
2015/08/10 职场文书
MongoDB 常用的crud操作语句
2021/06/20 MongoDB
Java实现简单小画板
2022/06/10 Java/Android
使用Redis实现分布式锁的方法
2022/06/16 Redis