js中常见宽度高度分析

来源:互联网 发布:手机足球软件 编辑:程序博客网 时间:2024/06/05 14:44

element.clientHeight返回元素的可见高度。element.clientWidth返回元素的可见宽度。element.offsetHeight        返回元素的高度。element.offsetWidth返回元素的宽度。element.offsetLeft返回元素的水平偏移位置。element.offsetParent返回元素的偏移容器。element.offsetTop返回元素的垂直偏移位置。element.scrollHeight                       返回元素的整体高度。element.scrollLeft返回元素左边缘与视图之间的距离。element.scrollTop返回元素上边缘与视图之间的距离。element.scrollWidth返回元素的整体宽度。
个人分析:

1.client:一开始在w3c上查完之后我还纠结什么是可见高度,后来自己试验之后才知道所谓可见高度就是元素去掉border之后的宽度,具体即为content+padding,假如元素已经超出当前屏幕可见高度,仍旧返回当前可见,并非原本高度。

2.offset:返回元素的高度即为content+padding+border

3.scroll:说到这个磨人的小妖精我就不能淡定了,因为大狼在试验的时候用的是刚刚做的那个鼠标hover上去遮罩就会划上去的动效,所以遮罩有一部分是overflow hidden调掉的,所以他是整体高度就不止是他本事的高度而是包含了hidden掉的部分高度,因此他是指包含本事及其子元素的所有高度宽度~~~content+padding+childenSize以上是scrollHeight和scrollwidth,接下来是scrollLeft和scrollTop这俩只有当元素本身有滚动条时才有意义,分别是下滚动条距左边距离和右滚动条距上边距离

既然说到这里,就把获取当前屏幕高度也一并看了,获取当前屏幕的对象是screen对象

1.当前屏幕高度:screen.height

2.当前屏幕宽度:screen.width

0 0