js中各种位置

nicercode 发布于2019-08-23 14:51 / 3257人阅读

摘要：中各种位置中有各种与位置相关的属性每次看到的时候都各种懵逼。内容可视区域的高度。对于的元素，这个属性一直是，单位，只读元素。标准事件和事件都定义了这两个属性

js中各种位置

js中有各种与位置相关的属性,每次看到的时候都各种懵逼。索性一次总结一下。
clientHeight

内容可视区域的高度。包括padding不包括border、水平滚动条、margin。对于inline的元素这个属性一直是0，单位px，只读元素。

offsetHeight

offsetHeight = clientHeight + border + 滚动条。对于inline的元素，这个属性一直是0，单位px，只读元素。

scrollHieght

当子元素的高度比本元素高,且overflow不等于hidden时,scrollHeight就是网页实际内容的高度。包括可视区域和被滚动条隐藏的区域。

clientWidth
offsetWidth
scrollWidth

同height

clientTop

元素上边框的厚度,当没有指定时,一般为0

offsetTop

元素距离父元素顶端的高度

scrollTop

滚动条被隐藏部分的高度,一般用来计算向下滚动多少像素

clientLeft
offsetLeft
scrollLeft

同top

event.clientX
event.clientY

相对于窗口可视区域的X,Y坐标,可视区域不包括工具栏和滚动条。

event.pageX
event.pageY

类似于event.pageX、event.pageY,但他们使用的是文档坐标而非窗口坐标。这两个属性不是标准属性，但得到广泛支持。
event.pageX = event.clientX + 横向滚动条距离。

event.offsetX
event.offsetY

鼠标相对于事件源元素(target)的X,Y坐标，只有IE事件有这两个属性，标准事件没有对应的属性

screenX
screenY

鼠标相对于用户显示器左上角的X,Y坐标。标准事件和IE事件都定义了这两个属性

云服务器海外云主机 js 中各种数据类型的比较 js中获取元素位置 js中变量的存储位置 java中各种布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101248.html

JavaScript中的各种宽高以及位置总结

摘要：和这一对属性是用来读取元素的的宽度和高度的。第二部分对象在中，对于元素的运动的操作通常都会涉及到对象，而对象也存在很多位置属性，且由于浏览器兼容性问题会导致这些属性间相互混淆，这里一一讲解。文章转自中的各种宽高以及位置总结在javascript中操作dom节点让其运动的时候，常常会涉及到各种宽高以及位置坐标等概念，如果不能很好地理解这些属性所代表的意义，就不能理解js的运动原理，同时...

microelec 2019-08-21 10:26 评论0 收藏0
‘纯css实现Material Design中的水滴动画按钮’的js体验优化

摘要：前言在上一篇，我们已经实现了用纯实现水滴扩散动画，但是有一些瑕疵，文章结尾处也提到过，一是页面加载进来就会看到按钮上的水滴动画运动一次，二是点击的时候不能根据鼠标的位置来扩散，今天我们来解决这个问题。前言在上一篇，我们已经实现了用纯css实现水滴扩散动画，但是有一些瑕疵，文章结尾处也提到过，一是页面加载进来就会看到按钮上的水滴动画运动一次，二是点击的时候不能根据鼠标的位置来扩散，今...

genefy 2019-08-29 17:02 评论0 收藏0
‘纯css实现Material Design中的水滴动画按钮’的js体验优化

摘要：前言在上一篇，我们已经实现了用纯实现水滴扩散动画，但是有一些瑕疵，文章结尾处也提到过，一是页面加载进来就会看到按钮上的水滴动画运动一次，二是点击的时候不能根据鼠标的位置来扩散，今天我们来解决这个问题。前言在上一篇，我们已经实现了用纯css实现水滴扩散动画，但是有一些瑕疵，文章结尾处也提到过，一是页面加载进来就会看到按钮上的水滴动画运动一次，二是点击的时候不能根据鼠标的位置来扩散，今...

xiaoqibTn 2019-08-23 12:28 评论0 收藏0
HTML元素和事件对象中的各种宽高和位置

摘要：元素和事件对象中的各种宽高和位置标签经常被一堆的弄混，统一整理一下。元素中的宽高和位置属性表示元素的内部宽度，以像素计。表示元素实际占用的高度，包括其边框，内边距和元素内容。 HTML元素和事件对象中的各种宽高和位置标签： js [TOC] 经常被一堆的xxxWidth,xxxLeft弄混，统一整理一下。 1. HTML元素中的宽高和位置属性 clientWidth 表示元素的内...

gggggggbong 2019-08-22 10:40 评论0 收藏0
Node.js学习之路08——fs文件系统之stream流的基本介绍

摘要：中各种用于读取数据的对象对象描述用于读取文件代表客户端请求或服务器端响应代表一个端口对象用于创建子进程的标准输出流。如果子进程和父进程共享输入输出流，则子进程的标准输出流被废弃用于创建子进程的标准错误输出流。 9. stream流 fs模块中集中文件读写方法的区别用途使用异步方式使用同步方式将文件完整读入缓存区 readFile readFileSync 将文件部...

BoYang 2019-08-22 14:47 评论0 收藏0