javascript中各种宽高、间距总结

混沌寄存器
• 阅读 1106

一、DOM对象

1、只读属性

(1)clientWidth、clientHeight: padding + content ( - scroll宽度 )
(2)offsetWidth、offsetHeight:padding + content + border
(3)clientTop、clientLeft:border的top、border的left
(4)offsetTop、offsetLeft:相对于其offsetParent上边距离、左边距离
概念:offsetParent是指一直往上找,第一个具有定位的父级元素
(5)scrollWidth、scrollHeight:padding + content + 不在可视区域的部分

2、可读可写属性

(1)scrollTop、scrollLeft:已经被卷上去或移到左边 看不到的部分
(2)dom.style.xxx:注意:该值只能得到设置的内联样式的值,实际计算后展示的值需要通过window.getComputedStyle($0)(非IE)或 dom.currentstyle 获得

二、Event事件

以下属性的获取:event.xx

(1)clientX、clientY:事件发生时,鼠标距离浏览器左上角(0,0)的距离
(2)screenX、screenY:事件发生时,鼠标距离屏幕左上角的距离
(3)offsetX、offsetY:事件发生时,鼠标距离该dom左上角的距离
(4)pageX、pageY:事件发生时,鼠标距离页面左上角的距离。若未出现滚动条,则与clientX、clientY相等

以上内容参考JavaScript中的各种宽高以及位置总结

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
晴空闲云 晴空闲云
2年前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
Karen110 Karen110
4年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
待兔 待兔
1年前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
凝雪探世界 凝雪探世界
4年前
js-Answers一
JavaScript的组成JavaScript由以下三部分组成:1.ECMAScript(核心):JavaScript语言基础2.DOM(文档对象模型):规定了访问HTML和XML的接口3.BOM(浏览器对象模型):提供了浏览器窗口之间进行交互的对象和方法JS的基本数据类型和引用数据类型
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
梦
4年前
uniapp获取手机状态栏高度
1、状态栏高度css中直接写var(statusbarheight)2、$('body').height(document.documentElement.clientHeight)//获取浏览器可视窗口高度、宽度clientWidth3、监听浏览器放大缩小window.onresizefunction
Wesley13 Wesley13
3年前
JavaWeb 之 JSON
一、概述  1、概念JSON:JavaScriptObjectNotation JavaScript对象表示法  2、基本格式varp{"name":"张三","age":23,"sex":"男"};  3、用途和优点(1)json现在多用于存储
Stella981 Stella981
3年前
JavaScript中的各种宽高总结
window和document首先我们来高清两个概念:   window和document的区别是什么?   window.location和document.location是一样吗?第一个问题:   Window对象表示浏览器中打开的窗口;window对象可以省略。比如alert()、window.alert(
Stella981 Stella981
3年前
JavaScript DOM编程艺术(第2版)学习笔记1(1~4章)
第一章一些基本概念HTML(超文本标记语言),构建网页的静态结构,由一系列的DOM组成;CSS(层叠样式表),给网页各部分结构添加样式;JavaScript,通过获取DOM给静态结构加上动作,使用户能够与静态网页进行交互;DOM,一种API(应用程序接口),通过这个接口动态的访问和修改结构或样式。浏
Wesley13 Wesley13
3年前
HTML元素和事件对象中的各种宽高和位置
HTML元素和事件对象中的各种宽高和位置标签:js\TOC\经常被一堆的xxxWidth,xxxLeft弄混,统一整理一下。1\.HTML元素中的宽高和位置属性clientWidth表示元素的内部宽度,以像素计。该属性包括