Web 页面的高、宽和座标 _Web前端

Web 页面的高、宽和坐标

本文展现3个区域的高、宽或坐标：

①页面body区域的height和width

②滚动条Scroll相关的高度

③鼠标的坐标

展示图:

height、width以及坐标都有client*和offset*之分。

这又涉及到IE浏览器和Chrome浏览器的差异性。

//compatMode是关于MS IE的渲染,CSS1Compat 为标准兼容模式开启

var dom = (document.compatMode && document.compatMode == "CSS1Compat") ? document.documentElement : document.body;

使用之前最好确认下使用的兼容模式。

这里的以dom 代替document.documentElement 为例。

-------------------------页面Body的Height和Width------------------------------------------------------

Height：dom.clientHeight和dom.offsetHeight

Width：dom.clientWidth和dom.offsetWidth

---在IE中

client*和offset*没区别，显示的数据都一样。

---在Chrome中

clientHeight：页面显示为浏览器的高度

offsetHeight：显示整个页面的高度

-------------------------滚动条Scroll-------------------------

Scroll的最大作用就是他的Top属性，可以显示Scroll到当前body的顶端距离。

比如：可以放到 '延迟加载' 那里使用。

---属性也分为2种

scrollHeight ： dom.scrollHeight 和 document.body.scrollHeight ;

scrollTop ：dom.scrollTop 和 document.body.scrollTop;

scrollLeft ： dom.scrollLeft 和 document.body.scrollLeft;

---在IE中

dom.scrollTop ：能正常显示

document.body.scrollTop：显示为0

---在Chrome中

dom.scrollTop ：显示为0

document.body.scrollTop：能正常显示

-------------------------鼠标的坐标-------------------------

X轴坐标：event.offsetX和event.clientX

Y轴坐标：event.offsetY和event.clientY

---在IE中

可以看出：

offsetY：相对于整个页面的X轴坐标，即当前body页面Y轴坐标+Scroll.Top

clientY：就单单为只显示页面的Y轴坐标。

---在Chrome中与IE一样。

-------------------------实例-------------------------

效果图：

完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>常见高度、宽度与坐标</title>
    <style type="text/css">
    #divdatas
    {
        	top:200px;
        	left:400px;
            position:fixed;	
            border-color:Black;
            border-style:solid;
            border-width:1px;
    }
    </style>
    <script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

            $("#body").mousemove(function () {
                //compatMode是关于MS IE的渲染,CSS1Compat 为标准兼容模式开启
                var dom = (document.compatMode && document.compatMode == "CSS1Compat") ? document.documentElement : document.body;

                //获取浏览器的Height和width (浏览器的clientHeight和offsetHeight在IE里是一样的，在chrome里不一样)
                //offsetHeight表示整个页面高度，而clientHeight表示只能给用户显示的高度
                var bodyclientHeight = dom.clientHeight;
                var bodyoffsetHeight = dom.offsetHeight;
                $("#bodyclientHeight").val(bodyclientHeight);
                $("#bodyoffsetHeight").val(bodyoffsetHeight);

                //body的2种width，值都是一样的
                var bodyclientWidth = dom.clientWidth;
                var bodyoffsetWidth = dom.offsetWidth;
                $("#bodyclientWidth").val(bodyclientWidth);
                $("#bodyoffsetWidth").val(bodyoffsetWidth);

                //滚动条的坐标
                var scrollHeight = dom.scrollHeight+"  "+document.body.scrollHeight ;
                var scrollTop = dom.scrollTop + "  " + document.body.scrollTop;
                var scrollLeft = dom.scrollLeft + " " + document.body.scrollLeft;
                $("#scrollHeight").val(scrollHeight);
                $("#scrollTop").val(scrollTop);
                $("#scrollLeft").val(scrollLeft);

                //获取鼠标X轴的2种坐标
                var offsetX = event.offsetX;
                var clientX = event.clientX;
                $("#mouseoffsetX").val(offsetX);
                $("#mouseclientX").val(clientX);

                //获取鼠标Y轴2种坐标
                var offsetY = event.offsetY;
                var clientY = event.clientY;
                $("#mouseoffsetY").val(offsetY);
                $("#mouseclientY").val(clientY);


            }); //body$
        })//end$
   
    </script>
</head>
<body  id="body" >
<div id="divdatas"   >
<table>
<tr><td>body的clientHeight高度</td><td><input type="text" id="bodyclientHeight" /></td></tr>
<tr><td>body的offsetHeight高度</td><td><input type="text" id="bodyoffsetHeight" /></td></tr>

<tr><td>body的bodyclientWidth宽度</td><td><input type="text" id="bodyclientWidth" /></td></tr>
<tr><td>body的bodyoffsetWidth宽度</td><td><input type="text" id="bodyoffsetWidth" /></td></tr>

<tr><td>滚动条的Height</td><td><input type="text" id="scrollHeight" /></td></tr>
<tr><td>滚动条的Top</td><td><input type="text" id="scrollTop" /></td></tr>
<tr><td>滚动条的Left</td><td><input type="text" id="scrollLeft" /></td></tr>

<tr><td>鼠标的offsetX轴</td><td><input type="text" id="mouseoffsetX" /></td></tr>
<tr><td>鼠标的clientX轴</td><td><input type="text" id="mouseclientX" /></td></tr>
<tr><td>鼠标的offsetY轴</td><td><input type="text" id="mouseoffsetY" /></td></tr>
<tr><td>鼠标的clientY轴</td><td><input type="text" id="mouseclientY" /></td></tr>
</table>
<br />
<br />
</div>
<br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br />

</body>
</html>