JavaScript中如何获取网页元素位置

首先明确几个概念:

1、网页大小:是指整张网页的全部面积大小;

2、浏览器窗口(viewport)大小:是指网页在浏览器窗口中的可见区域的面积大小;

3、绝对位置:是指网页元素左上角相对于整张网页左上角的(x,y)坐标;

4、相对位置:是指网页元素左上角相对于浏览器窗口左上角的(x,y)坐标。

1、clientWidth/clientHeight:表示网页元素在浏览器窗口中可见区域的宽/高,包括padding和content区域,不包括border和被滚动条卷去的内容;

使用如下方法获取浏览器窗口大小:

doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Javascript Test">
        <meta name="keywords" content="js test">
        <meta name="author" content="cy">
        <title>JS_TESTtitle>
        

        <script type="text/javascript" defer="defer">
            function getViewPort() {
                //BackCompat表示IE6种quirks模式
                if(document.compatMode == "BackCompat"){
                    return {
                        width: document.body.clientWidth,
                        height:document.body.clientHeight
                    }
                }
                else{//Css1Compat,正常兼容模式
                    return {
                        width: document.documentElement.clientWidth,
                        height:document.documentElement.clientHeight
                    }
                }
            }

            function showArea() {
                var area = getViewPort();
                alert("width: " + area.width + "; height: " + area.height);
            }
        script>
    head>
    /*网页加载完成之后调用showArea方法,否则document对象还没有生成*/
    <body onload="showArea()">
    body>
html>

2、scrollWidth/scrollHeight:表示网页元素包含滚动条在内的可见区域宽/高;

理论上将上面方法中的clientWidth/clientHeight换成scrollWidth/scrollHeight同样可以获得浏览器窗口的大小,但是,当网页全部内容能在浏览器窗口中全部显示时,不同浏览器对clientWidth/clientHeight和scrollWidth/scrollHeight解释的大小不一样,此时我们应获取二者中的较大者,改写上面方法:

<script type="text/javascript" defer="defer">
            function getViewPort() {
                //BackCompat表示IE6种quirks模式
                if(document.compatMode == "BackCompat"){
                    return {
                        width: Math.max(document.body.scrollWidth, document.body.clientWidth),
                        height:Math.max(document.body.scrollHeight, document.body.clientHeight)
                    }
                }
                else{//Css1Compat,正常兼容模式
                    return {
                        width: Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth),
                        height: Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)
                    }
                }
            }

            function showArea() {
                var area = getViewPort();
                alert("width: " + area.width + "; height: " + area.height);
            }
        script>

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

offsetLeft/offsetTop:是指网页元素左上角相对于其父容器(offsetParent)左上角的偏移量;通过循环父容器叠加offsetLeft/offsetTop便可获得其绝对位置,如下:

doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Javascript Test">
        <meta name="keywords" content="js test">
        <meta name="author" content="cy">
        <title>JS_TESTtitle>
        

        <script type="text/javascript" defer="defer">
            function getElementAbsoutlyLeft(element) {
                var absoutlyLeft = element.offsetLeft;
                var parent = element.offsetParent;

                while(!!parent) {
                    absoutlyLeft += parent.offsetLeft;
                    parent = parent.offsetParent;
                }

                return absoutlyLeft;
            }

            function getElementAbsoutlyTop(element) {
                var absoutlyTop = element.offsetTop;
                var parent = element.offsetParent;

                while(!!parent) {
                    absoutlyTop += parent.offsetTop;
                    parent = parent.offsetParent;
                }

                return absoutlyTop;
            }

            function showOffset() {
                var ele = document.getElementById("child");
                alert("absoutlyTop: " + getElementAbsoutlyTop(ele) + "; absoutlyLeft: " + getElementAbsoutlyLeft(ele));
            }
        script>
    head>
    <body onload="showOffset()">
        <div style="margin: 20px auto; padding:20px; width:800px; height:600px; background-color:red;">
            <div id="child" style="margin: 10px auto; padding:0; width:100%; height:100%; background-color:blue;"> 
            div>
        div>
    body>
html>

4、获取网页元素的相对位置:

scrollLeft/scrollTop:指网页元素被滚动条卷去的部分;所以,用绝对位置减去document元素的scrollLeft/scrollTop值即可得到相对位置,如下:

doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Javascript Test">
        <meta name="keywords" content="js test">
        <meta name="author" content="cy">
        <title>JS_TESTtitle>
        

        <script type="text/javascript" defer="defer">
            function getElementRelativeLeft(element) {
                var absoutlyLeft = element.offsetLeft;
                var parent = element.offsetParent;

                while(!!parent) {
                    absoutlyLeft += parent.offsetLeft;
                    parent = parent.offsetParent;
                }

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

                return absoutlyLeft - elementScrollLeft;
            }

            function getElementRelativeTop(element) {
                var absoutlyTop = element.offsetTop;
                var parent = element.offsetParent;

                while(!!parent) {
                    absoutlyTop += parent.offsetTop;
                    parent = parent.offsetParent;
                }

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

                return absoutlyTop - elementScrollTop;
            }

            function showRelativeOffset(event) {
                event.preventDefault();
                var ele = document.getElementById("child");
                alert("RelativeTop: " + getElementRelativeTop(ele) + "; RelativeLeft: " + getElementRelativeLeft(ele));
            }
        script>
    head>
    <body>
        <div style="margin: 20px auto; padding:20px; width:800px; height:1000px; background-color:red;">
            <div id="child" style="margin: 800px auto; padding:0; width:100%; height:100%; background-color:blue;">
                <a href="" onclick="showRelativeOffset(event)">showRelativeOffseta>
            div>
        div>
    body>
html>

5、获取网页元素位置的快速方法:

function getElementPosition(element) {
                var relativePosition = element.getBoundingClientRect();
                /*left、top、right、bottom均为element的相对位置*/
                var relativeLeft = relativePosition.left;
                var relativeTop = relativePosition.top;
                var relativeRight = relativePosition.right;
                var relativeBottom = relativePosition.bottom;
                /*******************************************/
            }

用上面方法得到的相对位置加上document元素的scrollLeft/scrollTop值即可得到绝对位置:

目前,IE、Firefox 3.0+、Opera 9.5+都支持getBoundingClientRect方法,而Firefox 2.x、Safari、Chrome、Konqueror不支持。

转载于:https://www.cnblogs.com/JDotNet/p/3474843.html

你可能感兴趣的:(JavaScript中如何获取网页元素位置)