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

jquery删除提示框弹出是否删除对话框

Jan 07 Javascript

javascript 小数取整简单实现方式

May 30 Javascript

jQuery实现复选框全选/取消全选/反选及获得选择的值

Jun 12 Javascript

js实现鼠标滚轮控制图片缩放效果的方法

Feb 20 Javascript

JavaScript动态改变表格单元格内容的方法

Mar 30 Javascript

jquery判断至少有一个checkbox被选中的方法

Jun 05 Javascript

两种js监听滚轮事件的实现方法

May 13 Javascript

JS中传递参数的几种不同方法比较

Jan 20 Javascript

微信小程序上传头像的实例详解

Oct 27 Javascript

vue单页面实现当前页面刷新或跳转时提示保存

Nov 02 Javascript

小程序实现新用户判断并跳转激活的方法

May 20 Javascript

vue 检测用户上传图片宽高的方法

Feb 06 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启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)

2014/10/20 PHP

php模拟服务器实现autoindex效果的方法

2015/03/10 PHP

Yii2实现让关联字段支持搜索功能的方法

2016/08/10 PHP

零基础php编程好学吗

2019/10/11 PHP

浅谈laravel 5.6 安装 windows上使用composer的安装过程

2019/10/18 PHP

ext combox 下拉框不出现自动提示,自动选中的解决方法

2010/02/24 Javascript

JQuery 常用操作代码

2010/03/14 Javascript

基于JQuery的数字改变的动画效果--可用来做计数器

2010/08/11 Javascript

通过js简单实现将一个文本内容转译成加密文本

2013/10/22 Javascript

JS操作XML实例总结(加载与解析XML文件、字符串)

2015/12/08 Javascript

实践中学习AngularJS表单

2016/03/21 Javascript

jQuery实现下拉框左右移动（全部移动，已选移动）

2016/04/15 Javascript

javascript与jquery动态创建html元素示例

2016/07/25 Javascript

bootstrap modal+gridview实现弹出框效果

2017/08/15 Javascript

VueJS组件之间通过props交互及验证的方式

2017/09/04 Javascript

Webpack 4.x搭建react开发环境的方法步骤

2018/08/15 Javascript

JavaScript常见事件处理程序实例总结

2019/01/05 Javascript

vue.js基于v-for实现批量渲染 Json数组对象列表数据示例

2019/08/03 Javascript

[04:29]2014DOTA2国际邀请赛主赛事第三日TOPPLAY

2014/07/21 DOTA

[47:03]Ti4第二日主赛事败者组 LGD vs iG 2

2014/07/21 DOTA

[01:14:05]《加油DOTA》第四期

2014/08/25 DOTA

Linux RedHat下安装Python2.7开发环境

2017/05/20 Python

Python3数字求和的实例

2019/02/19 Python

python里dict变成list实例方法

2019/06/26 Python

Pymysql实现往表中插入数据过程解析

2020/06/02 Python

python怎么对数字进行过滤

2020/07/05 Python

CSS3改变浏览器滚动条样式

2019/01/04 HTML / CSS

宝拉珍选澳大利亚官方购物网站：Paula’s Choice澳大利亚

2016/09/13 全球购物

ZINVO手表官网：男士和女士手表

2019/03/10 全球购物

Kusmi茶美国官网：优质散叶茶和茶包

2019/10/13 全球购物

this关键字的作用

2016/01/30 面试题

装饰活动策划方案

2014/02/11 职场文书

IT工程师岗位职责

2014/07/04 职场文书

2014年商场国庆节活动策划方案

2014/09/16 职场文书

学雷锋主题班会教案

2015/08/13 职场文书

MySql统计函数COUNT的具体使用详解

2022/08/14 MySQL