网页的大小与浏览器窗口的大小
一张网页的全部面积，就是他的大小。通常情况下，网页的大小由内容和css样式表决定。
浏览器窗口的大小，指的是在浏览器窗口中看到的那部分网页面积，又叫做‘视口’（viewport）。
在网页内容不出现滚动条的情况下，网页大小与视口是相等的。
获取网页的大小
- 方法1
网页上的每个元素，都有clientWidth和clientHeight属性。这两个属性指元素的内容部分加上padding所占据的视觉面积，不包括border和滚动条占用的空间。
因此，document元素的clientWidth和clientHeight属性就代表了网页的大小。
注意：clientWidth和clientHeight都是只读属性，不能对它们赋值。
//获取网页大小
document.body.clientWidth;
document.body.clientHeight;
- 方法2
网页上的每个元素还有scrollHeight和scrollWidth属性，指包含滚动条在内的该元素的视觉面积。
document对象的scrollHeight和scrollWidth属性就是网页的大小，意思就是滚动条滚过的所有长度和宽度。
获取网页元素的绝对位置
网页元素的绝对位置，指该元素的左上角相对于整张网页左上角的坐标。这个绝对位置要通过计算才能得到。
每个元素都有offsetTop和offsetLeft属性，表示该元素的左上角与父容器（offsetParent对象）左上角的距离。所以，只需要将这两个值进行累加，就可以得到该元素的绝对坐标。
获取网页元素的相对位置
网页元素的相对位置，指该元素左上角相对于浏览器窗口左上角的坐标。
有了绝对位置以后，获得相对位置就很容易了，只要将绝对坐标减去页面的滚动条滚动的距离就可以了。滚动条滚动的垂直距离，是document对象的scrollTop属性；滚动条滚动的水平距离是document对象的scrollLeft属性。
element.scrollIntoView()此方法可以将元素滚动到视口中，类似与锚点定位。
获取元素位置的快速
getBoundingClientRect()方法。它返回一个对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离。
网页元素的相对位置就是
var X= this.getBoundingClientRect().left;
var Y =this.getBoundingClientRect().top;
再加上滚动距离，就可以得到绝对位置
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
JQuery中的position() 和offset()
jquery中有position() 和offset()两种方法获取元素的位置。
-
position()
获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。
此方法只对可见元素有效。 -
offset()
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性：top 和 left。
此方法只对可见元素有效。
offset()方法可以让我们重新设置元素的位置。这个元素的位置是相对于document对象的。如果对象原先的position样式属性是 static的话，会被改成relative来实现重定位。
注意
1）、使用position()方法时事实上是把该元素当绝对定位来处理，获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。
2）使用position()方法时如果其所有的父元素都为默认定位（static）方式，则其处理方式和offset()一样，是当前窗口的相对偏移
3）使用offset()方法不管该元素如何定位，也不管其父元素如何定位，都是获取的该元素相对于当前视口的偏移
例如：要显示的元素存放在DOM的最顶端或者最底端（即其父元素就是body），这时用offset()是最好的。
网友评论