原生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中为String对象添加trim,ltrim,rtrim方法
Sep 22 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 Javascript
layer弹出层取消遮罩的方法
Sep 25 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
vue实现锚点定位功能
Jun 29 Vue.js
基于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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
你必须知道的Javascript知识点之"深入理解作用域链"的介绍
2013/04/23 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
jQuery实现弹出层效果
2019/12/10 jQuery
js实现飞机大战游戏
2020/08/26 Javascript
Python爬取国外天气预报网站的方法
2015/07/10 Python
python中比较两个列表的实例方法
2019/07/04 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
包装类的功能、种类、常用方法
2012/01/27 面试题
介绍一下SQL Server的全文索引
2013/08/15 面试题
购房协议书范本
2014/04/11 职场文书
养成教育经验材料
2014/05/26 职场文书
计算机实训报告总结
2014/11/05 职场文书
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python
Python中的tkinter库简单案例详解
2022/01/22 Python
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers