原生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;(在元素的包含元素不含滚动条的情况下)

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
在JavaScript中实现命名空间
Nov 23 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
JS实现小米轮播图
Sep 21 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
利用uni-app生成微信小程序的踩坑记录
Apr 05 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 4.2书写安全的脚本
2006/10/09 PHP
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
[56:41]iG vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/17 DOTA
Python+Wordpress制作小说站
2017/04/14 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
Python实战购物车项目的实现参考
2019/02/20 Python
使用TensorFlow对图像进行随机旋转的实现示例
2020/01/20 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
物流专员岗位职责
2014/02/17 职场文书
项目建议书格式
2014/03/12 职场文书
经典商业广告词
2014/03/13 职场文书
政治学求职信
2014/06/03 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
年终工作总结范文
2019/06/20 职场文书
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript