网页元素用Javascript获取页面元素的位置

查了好多资料&＃xff0c;发现还是不全&＃xff0c;干脆自己整理吧&＃xff0c;至少保证在我的做法正确的&＃xff0c;以免误导读者&＃xff0c;也是给自己做个记录吧&＃xff01;

    制作网页的过程中&＃xff0c;你有时候须要知道某个元素在网页上的确实位置。

    上面的教程总结了Javascript在网页定位方面的相关知识。

    一、网页的巨细和浏览器窗口的巨细

    首先&＃xff0c;要明白两个基本概念。

    一张网页的全体面积&＃xff0c;就是它的巨细。通常情况下&＃xff0c;网页的巨细由内容和CSS样式表决定。

    浏览器窗口的巨细&＃xff0c;则是指在浏览器窗口中看到的那部份网页面积&＃xff0c;又叫做viewport&＃xff08;视口&＃xff09;。

    很显然&＃xff0c;如果网页的内容可以在浏览器窗口中全体表现&＃xff08;也就是不出现滚动条&＃xff09;&＃xff0c;那么网页的巨细和浏览器窗口的巨细是相称的。如果不能全体表现&＃xff0c;则滚动浏览器窗口&＃xff0c;可以表现出网页的各个部份。

    二、获取网页的巨细

    网页上的每一个元素&＃xff0c;都有clientHeight和clientWidth属性。这两个属性指元素的内容部份再加上padding的所占领的视觉面积&＃xff0c;不包括border和滚动条占用的空间。

    &＃xff08;图一 clientHeight和clientWidth属性&＃xff09;

    因此&＃xff0c;document元素的clientHeight和clientWidth属性&＃xff0c;就代表了网页的巨细。

    function getViewport(){
if (document.compatMode &＃61;&＃61; "BackCompat"){
return {
width: document.body.clientWidth,
height: document.body.clientHeight
}
} else {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
}

    上面的getViewport函数就可以返回浏览器窗口的高和宽。使用的时候&＃xff0c;有三个地方须要注意&＃xff1a;

    三、获取网页巨细的另一种方法

    网页上的每一个元素还有scrollHeight和scrollWidth属性&＃xff0c;指包含滚动条在内的该元素的视觉面积。

    那么&＃xff0c;document对象的scrollHeight和scrollWidth属性就是网页的巨细&＃xff0c;意思就是滚动条滚过的全部长度和宽度。

    模仿getViewport()函数&＃xff0c;可以写出getPagearea()函数。

    function getPagearea(){
if (document.compatMode &＃61;&＃61; "BackCompat"){
return {
width: document.body.scrollWidth,
height: document.body.scrollHeight
}
} else {
return {
width: document.documentElement.scrollWidth,
height: document.documentElement.scrollHeight
}
}
}

    但是&＃xff0c;这个函数有一个问题。如果网页内容可以在浏览器窗口中全体表现&＃xff0c;不出现滚动条&＃xff0c;那么网页的clientWidth和scrollWidth应该相称。但是实际上&＃xff0c;不同浏览器有不同的处理&＃xff0c;这两个值未必相称。所以&＃xff0c;我们须要取它们当中较大的那个值&＃xff0c;因此要对getPagearea()函数进行改写。

    function getPagearea(){
if (document.compatMode &＃61;&＃61; "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)
}
}
}

    四、获取网页元素的绝对位置

    网页元素的绝对位置&＃xff0c;指该元素的左上角绝对于整张网页左上角的坐标。这个绝对位置要通过计算才能得到。

    首先&＃xff0c;每一个元素都有offsetTop和offsetLeft属性&＃xff0c;表示该元素的左上角与父容器&＃xff08;offsetParent对象&＃xff09;左上角的距离。所以&＃xff0c;只须要将这两个值进行累加&＃xff0c;就可以得到该元素的绝对坐标。

    &＃xff08;图二 offsetTop和offsetLeft属性&＃xff09;

    上面两个函数可以用来获取绝对位置的横坐标和纵坐标。

    function getElementLeft(element){
var actualLeft &＃61; element.offsetLeft;
var current &＃61; element.offsetParent;

    while (current !&＃61;&＃61; null){
actualLeft &＃43;&＃61; current.offsetLeft;
current &＃61; current.offsetParent;
}

    return actualLeft;
}

    function getElementTop(element){
var actualTop &＃61; element.offsetTop;
var current &＃61; element.offsetParent;

    while (current !&＃61;&＃61; null){
actualTop &＃43;&＃61; current.offsetTop;
current &＃61; current.offsetParent;
}

    return actualTop;
}

    由于在表格和iframe中&＃xff0c;offsetParent对象未必即是父容器&＃xff0c;所以上面的函数对于表格和iframe中的元素不实用。

    五、获取网页元素的绝对位置

    网页元素的绝对位置&＃xff0c;指该元素左上角绝对于浏览器窗口左上角的坐标。

    有了绝对位置当前&＃xff0c;取得绝对位置就很容易了&＃xff0c;只要将绝对坐标减去页面的滚动条滚动的距离就可以了。滚动条滚动的垂直距离&＃xff0c;是document对象的scrollTop属性&＃xff1b;滚动条滚动的水平距离是document对象的scrollLeft属性。

    &＃xff08;图三 scrollTop和scrollLeft属性&＃xff09;

    对上一节中的两个函数进行相应的改写&＃xff1a;

    function getElementViewLeft(element){
var actualLeft &＃61; element.offsetLeft;
var current &＃61; element.offsetParent;

    while (current !&＃61;&＃61; null){
actualLeft &＃43;&＃61; current.offsetLeft;
current &＃61; current.offsetParent;
}

    if (document.compatMode &＃61;&＃61; "BackCompat"){
var elementScrollLeft&＃61;document.body.scrollLeft;
} else {
var elementScrollLeft&＃61;document.documentElement.scrollLeft;
}

    return actualLeft-elementScrollLeft;
}

    function getElementViewTop(element){
var actualTop &＃61; element.offsetTop;
var current &＃61; element.offsetParent;

    while (current !&＃61;&＃61; null){
actualTop &＃43;&＃61; current. offsetTop;
current &＃61; current.offsetParent;
}

    if (document.compatMode &＃61;&＃61; "BackCompat"){
var elementScrollTop&＃61;document.body.scrollTop;
} else {
var elementScrollTop&＃61;document.documentElement.scrollTop;
}

    return actualTop-elementScrollTop;
}

    scrollTop和scrollLeft属性是可以赋值的&＃xff0c;并且会当即主动滚动网页到相应位置&＃xff0c;因此可以利用它们转变网页元素的绝对位置。另外&＃xff0c;element.scrollIntoView()方法也有类似作用&＃xff0c;可以使网页元素出现在浏览器窗口的左上角。

    六、获取元素位置的快速方法

    除了上面的函数之外&＃xff0c;还有一种快速方法&＃xff0c;可以立刻取得网页元素的位置。

    那就是使用getBoundingClientRect()方法。它返回一个对象&＃xff0c;其中包含了left、right、top、bottom四个属性&＃xff0c;分别对应了该元素的左上角和右下角绝对于浏览器窗口&＃xff08;viewport&＃xff09;左上角的距离。

    所以&＃xff0c;网页元素的绝对位置就是

    var X&＃61; this.getBoundingClientRect().left;

var Y &＃61;this.getBoundingClientRect().top;

    再加上滚动距离&＃xff0c;就可以得到绝对位置

    var X&＃61; this.getBoundingClientRect().left&＃43;document.documentElement.scrollLeft;

var Y &＃61;this.getBoundingClientRect().top&＃43;document.documentElement.scrollTop;

    目前&＃xff0c;IE、Firefox 3.0&＃43;、Opera 9.5&＃43;都支持该方法&＃xff0c;而Firefox 2.x、Safari、Chrome、Konqueror不支持。

    &＃xff08;完&＃xff09;

    原文网址&＃xff1a;http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_Javascript.html

文章结束给大家分享下程序员的一些笑话语录&＃xff1a; 与女友分手两月有余&＃xff0c;精神萎靡&＃xff0c;面带菜色。家人介绍一女孩&＃xff0c;昨日与其相亲。女孩果然漂亮&＃xff0c;一向吝啬的我决定破例请她吃晚饭。
选了一个蛮贵的西餐厅&＃xff0c;点了比较贵的菜。女孩眉开眼笑&＃xff0c;与我谈得很投机。聊着聊着&＃xff0c;她说&＃xff1a;“我给你讲个笑话吧。”“ok”
　　“一只螳螂要给一只雌蝴蝶介绍对象&＃xff0c;见面时发现对方是只雄蜘蛛。见面后螳螂问蝴蝶‘如何&＃xff1f;’&＃xff0c;‘他长的太难看了’&＃xff0c;‘别看人家长的丑&＃xff0c;人家还有网站呢’。”
　　“呵呵………”我笑。忽然她问&＃xff1a;“你有网站吗&＃xff1f;”