网页高宽等问题

网页几个高宽：

clientWidth和clientHeight这两个属性表示内容区域加上padding所占据位置，不包括border和滚动条

scrollWidth和scrollHeight表示包括滚动条在内的数值

但是！由于不同浏览器的解析不同，有些没有滚动条的网页也不一定clientWidth就会等于scrollWidth

所以我们要取她们中最大的那个

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

　　二。获取网页的绝对位置

每个元素都存在offsetLeft和offsetTop，表示其与父级元素左上角的位置，所以我们只要写个循环，不断获取父元素，并将offsetLeft和offsetTop进行叠加最终就可以得到该元素距离整个网页左上角(区别于浏览器)的绝对位置，代码如下,top相似

function getElementLeft(elment){
    	// 获取该元素相对父级的绝对位置
    	var actualLeft=elment.offsetLeft;
    	// 获取其父级元素
    	var current=element.offsetParent;
    	while(current!=null){
    		actualLeft=current.offsetLeft;
    		current=element.offsetParent;
    	}
    	return actualLeft;
	}

　　三。网页相对位置

相对位置解释：当前位置距离当前可视窗口左上角的位置，一张图解释

所以，只需要减去滚动条的高宽就可以算出了，代码如下

 

function getElementViewLeft(element){
　　　　var actualLeft = element.offsetLeft;
　　　　var current = element.offsetParent;
　　　　while (current !== null){
　　　　　　actualLeft += current.offsetLeft;
　　　　　　current = current.offsetParent;
　　　　}
　　　　if (document.compatMode == "BackCompat"){
　　　　　　var elementScrollLeft=document.body.scrollLeft;
　　　　} else {
　　　　　　var elementScrollLeft=document.documentElement.scrollLeft; 
　　　　}
　　　　return actualLeft-elementScrollLeft;
　　}