javascript中各种宽高、间距总结

DC_er 发布于2019-08-23 13:13 / 1443人阅读

一、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中的各种宽高以及位置总结

GPU云服务器云服务器 javascript学习总结 java中各种布局 php中各种注释符号 js 中各种数据类型的比较

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

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

前端入门4-CSS属性样式表

摘要：正文属性样式表正文属性样式表了解了具体的各种工作原理使用方式选择器规则层叠算法等之后，那么该来学习的也就是都支持哪些属性样式表了。本篇文章已授权微信公众号 dasu_Android（大苏）独家发布声明本系列文章内容全部梳理自以下四个来源：《HTML5权威指南》《JavaScript权威指南》 MDN web docs Github:smyhvae/web 作为一个前端小白，入...

hss01248 2019-04-23 13:14 评论0 收藏0
css学习归纳总结（二）

摘要：子选择器只对直接后代有影响的选择器，而对孙子后代以及多层后代不产生作用。烂透了尽可能使用复合语法糟糕好的避免不必要的重复糟糕好的组织好的代码格式代码的易读性和易维护性成正比。标签与元素标签和p元素有什么区别呢？大多数时候他们表示的是同一样东西，但仍有细微的区别。、等指的是HTML分隔符，而元素则是由一对开始结束标签构成的，用来包含某一些内容子选择器和后代选择器的区别：后代选择器...

KnewOne 2019-08-28 18:00 评论0 收藏0
总结：前端开发中让元素水平垂直居中的方法

摘要：如果要居中的块级元素直接是内联元素等，直接在其父级元素上加上属性即可图片之间，浏览器会产生默认的间距，父元素设置可以很好地解决这个问题。使用水平居中前提居中的元素必须是块级元素，如果是内联元素，需要添加属性而且元素不浮动。前端开发中，我们经常需要对元素进行水平垂直居中。为此，小编特地总结了让元素居中的方法。 showImg(https://segmentfault.com/img/b...

fnngj 2019-08-02 12:02 评论0 收藏0
总结：前端开发中让元素水平垂直居中的方法

摘要：如果要居中的块级元素直接是内联元素等，直接在其父级元素上加上属性即可图片之间，浏览器会产生默认的间距，父元素设置可以很好地解决这个问题。使用水平居中前提居中的元素必须是块级元素，如果是内联元素，需要添加属性而且元素不浮动。前端开发中，我们经常需要对元素进行水平垂直居中。为此，小编特地总结了让元素居中的方法。 showImg(https://segmentfault.com/img/b...

douzifly 2019-08-29 17:17 评论0 收藏0
JavaScript中的各种宽高以及位置总结

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

microelec 2019-08-21 10:26 评论0 收藏0