首页 » Web技术 » JS/jQuery » 正文

JS获取屏幕宽度和高度的方法

在做网页的时候,有时候我们需要获取窗口可视范围的高度、文档内容实际高度、窗口滚动条滚动高度等,比如做返回顶部的按钮,就需要获取到当前窗口滚动条滚动高度。下面我们就来讲几个获取这些数据的方法。

JS:

/********************
* 取窗口滚动条滚动高度  
******************/
function getScrollTop()
{
    var scrollTop=0;
    if(document.documentElement&&document.documentElement.scrollTop)
    {
        scrollTop=document.documentElement.scrollTop;
    }
    else if(document.body)
    {
        scrollTop=document.body.scrollTop;
    }
    alert(scrollTop);
}


/********************
* 取窗口可视范围的高度  
*******************/
function getClientHeight()
{
    var clientHeight=0;
    if(document.body.clientHeight&&document.documentElement.clientHeight)
    {
        var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;   
    }
    else
    {
        var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;   
    }
    alert(clientHeight);
}

/********************
* 取文档内容实际高度  
*******************/
function getScrollHeight()
{
    ScrollHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
    alert(ScrollHeight);
}

CSS:

#i1{
    width: 100%;
    height: 600px;
    background: red;
}
#i2{
    width: 100%;
    height: 600px;
    background: green;
}
#i3{
    width: 100%;
    height: 600px;
    background: blue;
}

HTML:

<div id="i1"></div>
<button onclick="getScrollTop()">getScrollTop</button>
<button onclick="getClientHeight()">getClientHeight</button>
<button onclick="getScrollHeight()">getScrollHeight</button>
<div id="i2"></div>
<div id="i3"></div>

下面是获取屏幕参数的几个方法:

document.body.clientWidth ==> BODY对象宽度

document.body.clientHeight ==> BODY对象高度

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度

本文共 17 个回复

  • 小义 2014/01/11 15:32

    测试评论

    • Specs 2014/01/11 15:35

      @ 小义 我的那个图片还是不能用~~

      • 小义 2014/01/11 15:36

        @ Specs 给我开个帐户,能发表文章的。。还有你这个评论有点问题。

        • Specs 2014/01/11 15:38

          @ 小义 我把注册开了 你注册一个号 我给你改权限

          • simply 2014/01/11 15:40

            @ Specs 注册好了

            • Specs 2014/01/11 15:43

              @ simply 已给权限~

              • simply 2014/01/11 15:48

                @ Specs 你的图片灯箱用的效果不是大发主题的,所以不行。

                • Specs 2014/01/11 15:50

                  @ simply 不是, 我把那个关了也不行, 我现在把那个灯箱插件关了 你再试试

                  • simply 2014/01/11 15:53

                    @ Specs 你关了,没有灯箱效果了。建议你重新安装下主题吧。

                    • Specs 2014/01/11 15:56

                      @ simply 那个版权信息,是直接把代码放到functions.php里面就行吗 single.php用不用改?

                      • simply 2014/01/11 16:50

                        @ Specs 大发文章中介绍的是说 防止采集加的版权。

                        • Specs 2014/01/11 16:52

                          @ simply 我看你那个也有,就是在TAGS下面的,怎么加上的~~

                          • simply 2014/01/11 16:53

                            @ Specs 这个哦,加代码就行了,在single.php里加。其它这个你在大发主题里扒。

                          • simply 2014/01/11 16:55

                            @ Specs 加个QQ吧。交个朋友 9-1-6-7-5-4-4-3-8

  • 依依 2014/01/12 20:40

    很实用,收藏了

  • 创业者技术社区 2014/09/09 17:18

    很不错 很强大 学习了

发表评论