首页
所有分类
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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 11 Javascript
不用写JS也能使用EXTJS视频演示
Dec 29 Javascript
jQuery中Dom的基本操作小结
Jan 23 Javascript
Jquery 在页面加载后执行的几种方式
Mar 14 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
Jun 06 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
JS如何定义用字符串拼接的变量
Jul 11 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
xps(1) CAD(1) XPathParser(1) protocol(1) 403(1) csgo(1) macos(1) 404(1) sock(2) Stater(1)
You might like
网页上facebook分享功能具体实现
2014/01/26 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
YII框架常用技巧总结
2019/04/27 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
JavaScript高级程序设计 阅读笔记（二十一） JavaScript中的XML
2012/09/14 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
2017/12/14 Javascript
Angular(5.2->6.1)升级小结
2018/12/27 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
Python从MP3文件获取id3的方法
2015/06/15 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
python 获取等间隔的数组实例
2019/07/04 Python
使用python画社交网络图实例代码
2019/07/10 Python
python利用platform模块获取系统信息
2020/10/09 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
英国花园、DIY、电器和家居用品商店：Robert Dyas
2019/03/18 全球购物
售后服务经理岗位职责范本
2014/02/22 职场文书
保密承诺书
2014/03/27 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
芙蓉镇观后感
2015/06/10 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL
python入门学习关于for else的特殊特性讲解
2021/11/20 Python
python数字图像处理实现图像的形变与缩放
2022/06/28 Python