JS_页面大小及元素的位置

 

对这些概念一直很模糊，今天仔细看了一下。

 

一，网页的绝对与相对大小

 

二，网页相对大小

每个元素的clientHeight,clientWidth = 元素内容+padding

var D = document; function getViewport(){ if(D.compatMode == "CSS1Compat"){ return { w : D.documentElement.clientWidth, h : D.documentElement.clientHeight } } else { return { w : D.body.clientWidth, h : D.body.clientHeight } } } dw("相对大小" + getViewport().w + " ; " + getViewport().h);  

 

三，网页的绝对大小

document的scrollHeight,scrollWidth,

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

 

这里有一个问题，如果网页内容能在浏览器中完全显示的话，那么绝对大小应该与相对大小一样才对，但是，不同的浏览器中其实有不同的处理，如下：（自己测的）

 

处理结果 = {

   FF : 绝对==相对,

   chrome : 绝对高度只是文档流的高度，而不是浏览器的高度,

   Opera : 相对高度是文档流的高度，而不是浏览器的高度,

   IE6,IE7 : 绝对高度只是文档流的高度,..., 但是计算绝对定位的元素!!(注意，其它的不计算绝对定位元素),

   IE8 : 绝对==相对

}

 

于是改进代码，取其中最大值

 

　　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) 　　　　　　} 　　　　} 　　} 

 

四，网页元素的绝对位置

 

offsetTop, offsetLeft,表示该元素的左上角与父容器左上角的距离

 

　function getElementLeft(element){ 　　　　var actualLeft = element.offsetLeft; 　　　　var current = element.offsetParent; 　　　　while (current !== null){ 　　　　　　actualLeft += current.offsetLeft; 　　　　　　current = current.offsetParent; 　　　　} 　　　　return actualLeft; 　　} function getElementTop(element){ 　　　　var actualTop = element.offsetTop; 　　　　var current = element.offsetParent; 　　　　while (current !== null){ 　　　　　　actualTop += current.offsetTop; 　　　　　　current = current.offsetParent; 　　　　} 　　　　return actualTop; 　　} 

 

注意此函数对表格及iframe不适用

 

五，网页元素的相对位置

绝对位置-滚动条滚动的距离 scrollTop,scrollLeft

 

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

 

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