编程 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 相关文章推荐

Google Suggest ;-) 基于js的动态下拉菜单

Oct 11 Javascript

Javascript的一种模块模式

Mar 22 Javascript

javascript 获取url参数和script标签中获取url参数函数代码

Jan 22 Javascript

js arguments,jcallee caller用法总结

Nov 30 Javascript

详谈$.data()的用法和作用

Feb 13 Javascript

理解Angular的providers给Http添加默认headers

Jul 04 Javascript

vue-infinite-loading2.0 中文文档详解

Apr 08 Javascript

微信小程序实现评论功能

Nov 28 Javascript

Angular4.0动画操作实例详解

May 10 Javascript

微信小程序利用Canvas绘制图片和竖排文字详解

Jun 25 Javascript

vue中touch和click共存的解决方式

Jul 28 Javascript

Vite + React从零开始搭建一个开源组件库

Jun 25 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变量引用的面试题

2010/08/08 PHP

ThinkPHP快速入门实例教程之数据分页

2014/07/01 PHP

php截取html字符串及自动补全html标签的方法

2015/01/15 PHP

PHP简单获取视频预览图的方法

2015/03/12 PHP

修复ShopNC使用QQ 互联时提示100010 错误

2015/11/08 PHP

PHP AjaxForm提交图片上传并显示图片源码

2016/11/29 PHP

PHP Laravel 上传图片、文件等类封装

2017/08/16 PHP

解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法

2012/11/14 Javascript

js实现点击切换TAB标签实例

2015/08/21 Javascript

window.onload使用指南

2015/09/13 Javascript

jquery采用oop模式class类的使用示例

2016/01/22 Javascript

JS把内容动态插入到DIV的实现方法

2016/07/19 Javascript

AngularJS中比较两个数组是否相同

2016/08/24 Javascript

JavaScript面向对象分层思维全面解析

2016/11/22 Javascript

基于JavaScript中字符串的match与replace方法(详解)

2017/12/04 Javascript

Vue.js实现数据响应的方法

2018/08/13 Javascript

vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法

2018/09/19 Javascript

微信小程序实现音乐播放器

2019/11/20 Javascript

python实现颜色空间转换程序(Tkinter)

2015/12/31 Python

python3获取两个日期之间所有日期,以及比较大小的实例

2018/04/08 Python

python实现海螺图片的方法示例

2019/05/12 Python

python获取网络图片方法及整理过程详解

2019/12/20 Python

python烟花效果的代码实例

2020/02/25 Python

Python爬虫程序架构和运行流程原理解析

2020/03/09 Python

QT5 Designer 打不开的问题及解决方法

2020/08/20 Python

Python之多进程与多线程的使用

2021/02/23 Python

迪卡侬英国官网：Decathlon英国

2017/04/08 全球购物

西班牙灯具网上商店：Lampara.es

2018/06/05 全球购物

技校毕业生的自我评价

2013/12/27 职场文书

门诊手术室工作制度

2014/01/30 职场文书

股权转让协议书范本

2014/04/12 职场文书

机电一体化专业求职信

2014/07/22 职场文书

委托证明书

2014/09/17 职场文书

幼儿园师德师风心得体会

2016/01/12 职场文书

golang 实现两个结构体复制字段

2021/04/28 Golang

浅谈redis缓存在项目中的使用

2021/05/20 Redis