首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
Javascript 刷新全集常用代码
Nov 22 Javascript
JSQL 批量图片切换的实现代码
May 05 Javascript
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 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
map(4) DFA(1) Slice(1) 结构体(1) random(1) pycharm(6) linux(15) 切片(1) pygame(3) 指针(1)
You might like
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
JS面向对象（3）之Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法
2016/02/25 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
python 简易计算器程序，代码就几行
2009/08/29 Python
Python中的pass语句使用方法讲解
2015/05/14 Python
详解Django框架中用context来解析模板的方法
2015/07/20 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
python线程池threadpool实现篇
2018/04/27 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
国际领先的在线时尚服装和配饰店：DressLily
2019/03/03 全球购物
《钱学森》听课反思
2014/03/01 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技