原生JS获取元素的位置与尺寸实现方法


Posted in Javascript onOctober 18, 2017

1、内高度、内宽度: 内边距 + 内容框

clientWidth
clientHeight

2、外高度,外宽度: 边框 + 内边距 + 内容框

offsetWidth
offsetHeight

3、上边框、左边框

clientTop
clientLeft

4、元素的大小及其相对于视口的位置

getBoundingClientRect()
//x\y:元素的左上角和父元素左上角的距离
//width/height:边框 + 内边距 + 内容框
//top:元素的上边界和父元素上边界的距离
//left:元素的左边界和父元素左边界的距离
//right:元素的右边界和父元素的左边界的距离
//bottom:元素的下边界和父元素上边界的距离

5、上边偏移量,左边的偏移量

offsetTop
offsetLest

6、可视区域的大小

document.documentElement.clientWidth
document.documentElement.clientHeight

7、页面的实际大小

document.documentElement.scrollWidth
document.documentElement.scrollHeight

8、窗口左上角 与 屏幕左上角的 距离

window.screenX、
window.screenY

9、屏幕宽高

window.screen.width
window.screen.height

10、屏幕可用宽高(去除任务栏)

window.screen.availWidth
window.screen.availHeight

11、窗口的内高度、内宽度(文档显示区域+滚动条)

window.innerWidth
window.innerHeight

12、窗口的外高度、外宽度

window.outerWidth
window.outerHeiht

以上这篇原生JS获取元素的位置与尺寸实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
javascript 时间比较实现代码
Oct 28 Javascript
js中substring和substr的定义和用法
May 05 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
Apr 21 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
vue实现列表垂直无缝滚动
Apr 08 Vue.js
详谈commonjs模块与es6模块的区别
Oct 18 #Javascript
从源码看angular/material2 中 dialog模块的实现方法
Oct 18 #Javascript
详解http访问解析流程原理
Oct 18 #Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 #Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 #Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 #Javascript
基于JavaScript表单脚本(详解)
Oct 18 #Javascript
You might like
php不用正则采集速度探究总结
2008/03/24 PHP
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
小议Javascript中的this指针
2010/03/18 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
python实现获取序列中最小的几个元素
2014/09/25 Python
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
高校学生干部的自我评价分享
2013/11/04 职场文书
领导干部“四风”问题批评与自我批评材料
2014/09/24 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书
pytorch中的 .view()函数的用法介绍
2022/03/17 Python
python的html标准库
2022/04/29 Python
Redis批量生成数据的实现
2022/06/05 Redis
springboot读取resources下文件的方式详解
2022/06/21 Java/Android