编程 Javascript

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

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

原生js获取浏览器窗口及元素宽高常用方法集合

- Author -

夏天不做梦

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载

Jul 21 Javascript

Mozilla 表达式 __noSuchMethod__

Apr 05 Javascript

基于jQuery的message插件实现右下角弹出消息框

Jan 11 Javascript

JS Canvas定时器模拟动态加载动画

Sep 17 Javascript

Vue自定义指令介绍(2)

Dec 08 Javascript

JS搜狐面试题分析

Dec 16 Javascript

jQuery源码分析之sizzle选择器详解

Feb 13 Javascript

JQuery实现文字无缝滚动效果示例代码(Marquee插件)

Mar 07 Javascript

jQuery实现的简单在线计算器功能

May 11 jQuery

Angularjs中ng-repeat的简单实例

Aug 25 Javascript

vue项目中使用axios上传图片等文件操作

Nov 02 Javascript

JS检测浏览器开发者工具是否打开的方法详解

Oct 02 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

要会喝咖啡也要会知道咖啡豆

2021/03/03 咖啡文化

探讨PHP中OO之静态关键字以及类常量的详解

2013/06/07 PHP

ThinkPHP模板自定义标签使用方法

2014/06/26 PHP

PHP实现HTTP断点续传的方法

2015/06/17 PHP

PHP实现基于3DES算法加密解密字符串示例

2018/08/24 PHP

javascript编程起步（第七课）

2007/01/10 Javascript

javascript 极速隐藏/显示万行表格列只需 60毫秒

2009/03/28 Javascript

parentElement,srcElement的使用小结

2014/01/13 Javascript

基于jQuery实现的文字按钮表单特效整理

2014/12/07 Javascript

JS鼠标拖拽实例分析

2015/11/23 Javascript

bootstrap3 dialog 更强大、更灵活的模态框

2017/04/20 Javascript

利用forever和pm2部署node.js项目过程

2017/05/10 Javascript

JS简单实现自定义右键菜单实例

2017/05/31 Javascript

Angular 4依赖注入学习教程之FactoryProvider配置依赖对象（五）

2017/06/04 Javascript

jquery Ajax实现Select动态添加数据

2017/06/08 jQuery

解决vue里碰到 $refs 的问题的方法

2017/07/13 Javascript

基于JavaScript实现前端数据多条件筛选功能

2020/08/19 Javascript

Vue组件间通信方法总结（父子组件、兄弟组件及祖先后代组件间）

2019/04/17 Javascript

Layui tree 下拉菜单树的实例代码

2019/09/21 Javascript

JavaScript Canvas编写炫彩的网页时钟

2019/10/16 Javascript

Vue-router编程式导航的两种实现代码

2021/03/04 Vue.js

Python类方法__init__和__del__构造、析构过程分析

2015/03/06 Python

Python解惑之True和False详解

2017/04/24 Python

Python脚本修改阿里云的访问控制列表的方法

2019/03/08 Python

python 匿名函数与三元运算学习笔记

2020/10/23 Python

巴基斯坦购物网站：Goto

2019/03/11 全球购物

Amcal中文官网：澳洲综合性连锁药房

2019/03/28 全球购物

法国亚马逊官方网站：Amazon.fr

2020/12/19 全球购物

师范毕业生求职自荐信

2013/09/25 职场文书

服务行业个人求职的自我评价

2013/12/12 职场文书

霸王洗发水广告词

2014/03/14 职场文书

职业道德模范事迹材料

2014/08/24 职场文书

总经理助理岗位职责

2015/01/31 职场文书

2016春节慰问信范文

2015/03/25 职场文书

2015新学期校长寄语（3篇）

2015/03/25 职场文书

win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法

2022/07/15 数码科技