http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html
clientHeight和clientWidth:
元素的content+padding视觉面积,不包括border和滚动条占用的空间。
scrollHeight和scrollWidth
滚动条滚过的所有长度和宽度,有兼容性
scrollTop和scrollLeft
滚动条垂直距离,是document对象的scrollTop属性。
滚动条水平距离,是document对象的scrollLeft属性。
scrollTop和scrollLeft属性可以赋值,并立即自动滚动网页到相应位置
offsetTop和offsetLeft
该元素的左/上角与父容器(offsetParent对象)左/上角的距离
获取网页的大小
function getViewport(){
if (document.compatMode == "BackCompat"){
return {
width: document.body.clientWidth,//IE6
height: document.body.clientHeight
}
} else {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
}
---------------------------------------------------------------------
//取scrollHeight和clientHeight的最大值
function getPagearea(){
if (document.compatMode == "BackCompat"){
return {
width: Math.max(document.body.scrollWidth,
document.body.clientWidth),
height: Math.max(document.body.scrollHeight,
document.body.clientHeight)
}
} else {
return {
width: Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth),
height: Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight)
}
}
}
获取网页元素的绝对位置
该元素的左上角相对于整张网页左上角的坐标
由于在表格和iframe中,offsetParent对象未必等于父容器,以下的函数对于表格和iframe中的元素不适用,所以表格被淘汰了。。。
function getElementLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !==null){
actualLeft += (current.offsetLeft+current.clientLeft);
current = current.offsetParent;
}
return actualLeft;
}
function getElementTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current !== null){
actualTop += (current.offsetTop+current.clientTop);
current = current.offsetParent;
}
return actualTop;
}
获取网页元素的相对位置
该元素左上角相对于浏览器窗口左上角的坐标;
有了绝对位置以后,将绝对坐标减去页面的滚动条滚动的距离就可以了。
滚动条垂直距离,是document对象的scrollTop属性。
滚动条水平距离,是document对象的scrollLeft属性。
//该元素left
function getElementViewLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !== null){
actualLeft += (current.offsetLeft+current.clientLeft);
current = current.offsetParent;
}
if (document.compatMode == "BackCompat"){
var elementScrollLeft=document.body.scrollLeft;
} else {
var elementScrollLeft=document.documentElement.scrollLeft;
}
return actualLeft-elementScrollLeft;
}
//该元素top
function getElementViewTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current !== null){
actualTop += (current.offsetTop+current.clientTop);
current = current.offsetParent;
}
if (document.compatMode == "BackCompat"){
var elementScrollTop=document.body.scrollTop;
} else {
var elementScrollTop=document.documentElement.scrollTop;
}
return actualTop-elementScrollTop;
}