【javascript学习指南】JavaScript获取窗口可视区域的宽高的例子

更新时间:2019-05-09    来源:jquery    手机版     字体:

【www.bbyears.com--jquery】

在jQuery中我们很容易就可以获取整个浏览器窗口可视区域的宽高:

 代码如下

alert($(window).height()); //浏览器时下窗口可视区域高度
alert($(document).height()); //浏览器时下窗口文档的高度
alert($(document.body).height());//浏览器时下窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器时下窗口可视区域宽度
alert($(document).width());//浏览器时下窗口文档对于象宽度
alert($(document.body).width());//浏览器时下窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin
 
alert($(document).scrollTop()); //获取滚动条到顶部的垂直高度
alert($(document).scrollLeft()); //获取滚动条到左边的垂直宽度

但是在原生JavaScript中如何获取这个值呢?关于获取这个值的说法网上一大堆,但大多数都是获取屏幕宽高,而非浏览器可视区域的宽高。因为屏幕大小对于网页来说不是很重要,但可视区域可就不一样了,用户可能随时改变浏览器的大小,所以获取浏览器可视区域的宽高可以动态调整一些需要JavaScript控制的内容。什么是可视区域呢?

JavaScript获取窗口可视区域的宽高的例子

如图中的FireFox浏览器,虽然浏览器整个窗口很大,但控制台却占用了一半,所以可视区域是指能显示网页内容区域的宽高,因为控制台不能显示网页内容,所以控制台不算,你拉动控制台的时候网页可视区域的宽高也会随之改变。

JavaScript获取窗口可视区域的宽高的例子

可视区域的宽高并不等于内容的狂高,如图中的网页任何内容都没有,但可视区域的高跟它没有任何关系,如果内容超过可视区域的高度或者宽度就出现滚动条。要获取可视区域的宽高每个浏览器的获取方法不一样,如:

FireFox document.body.scrollHeight

Chrome/IE document.documentElement.clientHeight

于是我写了一个方法,兼容IE(7+)/Chrome/FireFox等主流浏览器

 代码如下

var winSize = function() {
    var e = window,
        a = "inner";
 
    if (!("innerWidth" in window )){
        a = "client";
        e = document.documentElement || document.body;
    }
 
    return { width : e[ a+"Width" ] , height : e[ a+"Height" ] };
};
 
winSize().height;   // height
winSize().width;    // width

本文来源:http://www.bbyears.com/wangyezhizuo/50141.html