Web 页面的高、宽和座标

2012-09-02

Web 页面的高、宽和坐标本文展现3个区域的高、宽或坐标：①页面body区域的height和width②滚动条Scroll相关的高

Web 页面的高、宽和坐标

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

①页面body区域的height和width

②滚动条Scroll相关的高度

③鼠标的坐标

展示图:

Web 页面的高、宽和座标

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.offsetHeightWidth：dom.clientWidth和dom.offsetWidth
---在IE中client*和offset*没区别，显示的数据都一样。 Web 页面的高、宽和座标

---在Chrome中

clientHeight：页面显示为浏览器的高度offsetHeight：显示整个页面的高度
Web 页面的高、宽和座标

-------------------------滚动条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中
Web 页面的高、宽和座标

dom.scrollTop ：能正常显示document.body.scrollTop：显示为0
---在Chrome中
Web 页面的高、宽和座标

dom.scrollTop ：显示为0document.body.scrollTop：能正常显示
-------------------------鼠标的坐标-------------------------
X轴坐标：event.offsetX和event.clientXY轴坐标：event.offsetY和event.clientY
---在IE中 Web 页面的高、宽和座标

可以看出：offsetY：相对于整个页面的X轴坐标，即当前body页面Y轴坐标+Scroll.TopclientY：就单单为只显示页面的Y轴坐标。
---在Chrome中与IE一样。
-------------------------实例-------------------------
效果图： Web 页面的高、宽和座标

完整代码：

<!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>

热点排行

Web前端

Web 页面的高、宽和座标