老虎美食博客

和老虎一起美食一下吧!

« prototype.js 中的 bind() 函數准确获取指定元素 CSS 属性值 »

JavaScript 获得页面区域大小的代码

getPageSize函数返回一个数组,前两个是整个页面的宽度和高度,后两个是页面窗口的宽度和高度

function getPageSize() 
{
    
var xScroll, yScroll;
    
if (window.innerHeight && window.scrollMaxY)
    
{
        xScroll 
= document.body.scrollWidth;
        yScroll 
= window.innerHeight + window.scrollMaxY;
    }
 
    
else if (document.body.scrollHeight > document.body.offsetHeight) 
    
{
        xScroll 
= document.body.scrollWidth;
        yScroll 
= document.body.scrollHeight;
    }
 
    
else 
    
{
        xScroll 
= document.body.offsetWidth;
        yScroll 
= document.body.offsetHeight;
    }

    
var windowWidth, windowHeight;
    
if (self.innerHeight) 
    
{
        windowWidth 
= self.innerWidth;
        windowHeight 
= self.innerHeight;
    }
 
    
else if (document.documentElement && document.documentElement.clientHeight) 
    
{
        windowWidth 
= document.documentElement.clientWidth;
        windowHeight 
= document.documentElement.clientHeight;
    }
 
    
else if (document.body) 
    
{
        windowWidth 
= document.body.clientWidth;
        windowHeight 
= document.body.clientHeight;
    }

    
if (yScroll < windowHeight) 
    
{
        pageHeight 
= windowHeight;
    }
 
    
else 
    
{
        pageHeight 
= yScroll;
    }

    
if (xScroll < windowWidth) 
    
{
        pageWidth 
= windowWidth;
    }
 
    
else 
    
{
        pageWidth 
= xScroll;
    }

    arrayPageSize 
= new Array(pageWidth, pageHeight, windowWidth, windowHeight);
    
return arrayPageSize;
}

 getScrollTop函数获得当前页面的滚动条纵坐标位置。在给页面添加了
<!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">
后,document.body.scrollTop永远等于0。此时可以用这个方法来获得scrollTop。

function getScrollTop()
{       
    
if (typeof window.pageYOffset != 'undefined'
    

       
return window.pageYOffset; 
    }
 
    
else if (typeof document.compatMode != 'undefined' && 
         document.compatMode 
!= 'BackCompat'
    

       
return document.documentElement.scrollTop; 
    }
 
    
else if (typeof document.body != 'undefined'
    

       
return document.body.scrollTop; 
    }
 
}


  • 相关文章:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

最新评论及回复

最近发表

Powered By Z-Blog 1.8 Spirit Build 80605 Code detection by Codefense

Copyright 2007 老虎美食博客. Some Rights Reserved.