当前位置:首页 > 日记 > 正文

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

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

窗口可视区域宽度: 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实现让浏览器停止载入

方法,浏览器,页面,电脑软件,JavaScript,本想弄个判断页面载入时间,过长就不加载特效的JavaScript代码,不过还是有点缺陷,这里就记录下来吧。IE浏览器用document.execCommand("Stop"),Chrome和Firefox用window.stop()(顺便说下,这是JavaScript标…

jQuery自定义元素右键点击事件 |

jQuery自定义元素右键点击事件 |

自定义,元素,点击事件,右键,案例,大多数情况下我们使用左键来进行页面交互,而右键大部分对于开发者来说是审查元素的,有的时候我们也要自定义鼠标右键点击行为来达到更好的交互性,常见的有漫画左键前进、右键后退。第一步我们要屏蔽浏览器默认…

JavaScript判断浏览器及其版本信息

JavaScript判断浏览器及其版本信息

版本信息,浏览器,电脑软件,JavaScript,通过window.navigator来判断:function getBrowserInfo(){ var Info = {}; var str = window.navigator.userAgent.toLowerCase(); var bReg =/(msie|firefox|chrome|opera|version).*?([\d.]+)/; var …

qq浏览器怎么设置默认浏览器QQ浏览

qq浏览器怎么设置默认浏览器QQ浏览

默认浏览器,方法,浏览器,设置,浏览器设置,  有时候打开一些网页,使用的不是自己常用的qq浏览器,那么,如何将QQ浏览器设置为默认的浏览器呢?随小编一起来看看qq浏览器恢复默认设置的方法吧!qq浏览器设置默认浏览器的方法一、在电脑桌面上的&l…

qq浏览器兼容模式怎么设置

qq浏览器兼容模式怎么设置

浏览器兼容,设置,模式,电脑软件,qq,  qq浏览器兼容模式主要用于解决部分网站无法兼容的问题,我们只需要将浏览模式切换到兼容模式下就可以正常浏览了,比如一些网银网站等就需要启用兼容视图才能下继续,下面就跟小编来了解一下吧!以下是设置…

QQ浏览器怎么翻译网页QQ浏览器翻译

QQ浏览器怎么翻译网页QQ浏览器翻译

浏览器,网页,步骤,方法,收藏夹,  浏览英文网页的时候看不懂怎么办?这里我们可以使用QQ浏览器来翻译网页,那么,qq浏览器怎么翻译网页?下面是小编为大家整编的QQ浏览器翻译英文网页的教程,大家快来看看吧。QQ浏览器翻译网页方法第一步:打开QQ浏…

如何设置qq邮箱的默认浏览器qq邮箱

如何设置qq邮箱的默认浏览器qq邮箱

默认浏览器,默认,教程,设置,方法,  为了方便打开邮箱,我们可以为qq邮箱设置默认打开的浏览器,那么具体的操作是怎样的呢?下面就让小编告诉你如何设置qq邮箱的默认浏览器,希望对大家有所帮助。设置qq邮箱的默认浏览器的方法单击桌面左下角&ld…

怎么取消默认打开QQ浏览器

怎么取消默认打开QQ浏览器

默认,浏览器,取消,方法,设置,  打开浏览器总是弹出QQ浏览器,但是平时不是很常用QQ浏览器,如何保证成功设置默认qq浏览器?该怎么取消这个默认设置呢?下面跟着小编一起来看看设置和取消默认打开QQ浏览器的教程。取消默认打开QQ浏览器的方法其…

怎么利用QQ浏览器翻译英文网页

怎么利用QQ浏览器翻译英文网页

浏览器,方法,屏蔽,网页,英文,  QQ浏览器有个非常强大的功能,那就是可以翻译英文网页,大家想不想试一试?小编整理了关于利用QQ浏览器翻译英文网页的步骤,希望对大家有帮助!利用QQ浏览器翻译英文网页的方法打开QQ浏览器的应用中心;在应用中心添…

QQ浏览器鼠标手势设置方法

QQ浏览器鼠标手势设置方法

设置,浏览器,鼠标手势,方法,电脑软件,  QQ浏览器鼠标手势功能大大地方便了我们的网页浏览,不过需要先设置一下才能使用,那么QQ浏览器鼠标手势该怎么使用呢?下面小编为大家讲一下。QQ浏览器鼠标手势设置方法  首先,我们打开QQ浏览器,然后点…

qq浏览器兼容模式怎么设置qq浏览器

qq浏览器兼容模式怎么设置qq浏览器

模式,设置,步骤,浏览器兼容,方法,  qq浏览器设置兼容模式可以方便我们浏览网站,具体应该怎么设置呢?设置兼容模式的方法是什么?下面是小编为大家整编的qq浏览器设置兼容模式的方法,大家快来看看吧。qq浏览器兼容模式设置步骤1、首先我们打开Q…

qq浏览器怎样同步书签图文教程

qq浏览器怎样同步书签图文教程

浏览器,同步,书签,方法,图文教程,  我们经常会使用qq浏览器来浏览网页,如果我们更换了电脑,那么,应该如何将书签同步到新电脑中呢?下面就让小编告诉你qq浏览器同步书签图文教程。qq浏览器同步书签的方法一1.我们先来到QQ浏览器中,找到页面右…