彩世界开奖app官网-彩世界平台官方网址(彩票平台)
做最好的网站
来自 彩世界平台官方网址 2019-11-28 06:10 的文章
当前位置: 彩世界开奖app官网 > 彩世界平台官方网址 > 正文

用js小类库获取浏览器的高度和宽度信息_javascr

页面:就是我们制作出来的网页的页面的一个抽象,他的高度通常比我们的浏览器的高度要高,宽度通常是小于等于我们的浏览器宽度

复制代码

网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth " "; 网页可见区域高:document.body.offsetHeight " "; 网页正文全文宽:document.body.scrollWidth; 网页正文全文高:document.body.scrollHeight; 网页被卷去的高: document.body.scrollTop; 网页被卷去的高:document.documentElement.scrollTop; 网页被卷去的左:document.body.scrollLeft; 网页正文部分上: window.screenTop; 网页正文部分左: window.screenLeft; 屏幕分辨率的高: window.screen.height; 屏幕分辨率的宽: window.screen.width; 屏幕可用工作区高度: window.screen.availHeight; 屏幕可用工作区宽度: window.screen.availWidth; 你的屏幕设置是 window.screen.colorDepth " 位彩色"; 你的屏幕设置 window.screen.deviceXDPI " 像素/英寸";

实例演示:

浏览器窗口:就是我们使用的浏览器的一个抽象,他包含了菜单栏、工具栏、书签栏、状态栏、页面显示区等。因此他的高度绝对大于等于视口的高度,宽度绝对大于等于视口的宽度

JQuery:

视口:就是浏览器中显示页面的区域

本文章来给在大家介绍关于JS获取屏幕、浏览器、网页高度,宽度信息定位,各位朋友可进入参考。

对这三个概念做一个解释:

})

有了这三个概念铺底,我们来写个小类库,获取这个“对象”的高度和宽度等信息吧:复制代码 代码如下: var Browser = { }; //页面 Browser.Page = { return { scrollTop: function () { return Math.max(document.body.scrollTop, document.documentElement.scrollTop); }, scrollLeft: function () { return Math.max(document.body.scrollLeft, document.documentElement.scrollLeft); }, height: function () { var _height; if (document.compatMode == "CSS1Compat") { _height = document.documentElement.scrollHeight; } else { _height = document.body.scrollHeight; } return _height; }, width: function () { var _width; if (document.compatMode == "CSS1Compat") { _width = document.documentElement.scrollWidth; } else { _width = document.body.scrollWidth; } return _width; } }; })(); //窗口: Browser.Window = { return { outerHeight: function () { var _hei = window.outerHeight; if (typeof _hei != "number") { _hei = Browser.ViewPort.outerHeight(); } return _hei; }, outerWidth: function () { var _wid = window.outerWidth; if (typeof _wid != "number") { _wid = Browser.ViewPort.outerWidth(); } return _wid; }, innerHeight: function () { var _hei = window.innerHeight; if (typeof _hel != "number") { _hei = Browser.ViewPort.innerHeight(); } return _hei; }, innerWidth: function () { var _wid = window.innerWidth; if (typeof _wid != "number") { _wid = Browser.ViewPort.innerWidth(); } return _wid; }, height: function () { return Browser.Window.innerHeight(); }, width: function () { return Browser.Window.innerWidth; //视口: Browser.ViewPort = { return { innerHeight: function () { var _height; if (document.compatMode == "CSS1Compat") { _height = document.documentElement.clientHeight; } else { _height = document.body.clientHeight; } return _height; }, innerWidth: function () { var _width; if (document.compatMode == "CSS1Compat") { _width = document.documentElement.clientWidth; } else { _width = document.body.clientWidth; } return _width; }, outerHeight: function () { var _height; if (document.compatMode == "CSS1Compat") { _height = document.documentElement.offsetHeight; } else { _height = document.body.offsetHeight; } return _height; }, outerWidth: function () { var _width; if (document.compatMode == "CSS1Compat") { _width = document.documentElement.offsetWidth; } else { _width = document.body.offsetWidth; } return _width; }, width: function () { return Browser.ViewPort.innerWidth(); }, height: function () { return Browser.ViewPort.innerHeight; 做几点说明: 1、已经能支持获取多浏览器的内部的视口的宽度和高度信息 2、在IE 9中已经和其他的浏览器(Opera、Chrome、FirFox、Safari)一样,已经能支持用window.innerHeight、window.innerWidth、window.outerHeight、window.outerWidth这四个属性获取浏览器的窗口、视口的宽度高度信息,但是IE9以前的IE版本是没有这些属性的,因此在这样的情况下,我将视口和窗口的概念等同起来了。 2、虽然window有宽度和高度信息,但是不一定是真正浏览器窗口的真正的宽度和高度信息。因为有些浏览器返回的结果中就不含菜单栏、工具栏等的高度信息。 实例演示: 在一个垂直内容过多的页面中,使一个DIV总能保持在视口的中心位置: 代码: 复制代码 代码如下: window.onload = window.onresize = function () { var top = Math.round(Browser.Page.scrollTop() (Browser.ViewPort.height - (parseInt(document.getElementById.style.height) / 2)); var left = Math.round(Browser.Page.scrollLeft() (Browser.ViewPort.width - (parseInt(document.getElementById.style.width) / 2)); document.getElementById.style.top = top "px"; document.getElementById.style.left = left "px"; } 大家测试时可以采用改变窗口大小的方式来查看。 时间不早了,晚安! 源代码下载查看

 代码如下

这段资料来源于网络,看到这么多的相似的概念时我已经疯掉了,但处于技术人的执着,我还是顽强的看完了并做了一些理解。经过自己的理解和吸收之后,我觉得如果我每次想获取一个高度或者宽度信息时我会抓狂的,因此,我对浏览器的这些属性做了一些整理和抽象,按照这样的三个对象来剥离这么多的相似的属性,第一个是页面,第二是窗口,第三个是视口。来看图片理解我的这三个对象的含义吧:

[ad#content]在JS操作DOM的时候,会经常用到...

因此当用户在一个较长内容的网页中点击某一个按钮显示DIV层会发现没有任何效果,因此,我们需要准备的知道用户当前的浏览的位置的信息。在实现这个要求之前,先来看看在js中有哪些工具可以让我们使用:

alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin

代码:

$(document).ready(function(){
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin

2、在IE 9中已经和其他的浏览器(Opera、Chrome、FirFox、Safari)一样,已经能支持用window.innerHeight、window.innerWidth、window.outerHeight、window.outerWidth这四个属性获取浏览器的窗口、视口的宽度高度信息,但是IE9以前的IE版本是没有这些属性的,因此在这样的情况下,我将视口和窗口的概念等同起来了。

复制代码

1、已经能支持获取多浏览器的内部的视口的宽度和高度信息

<script language="javascript">
function getDocumentSize(){
var str = '';
str =document.body.clientWidth "rn";//网页可见区域宽
str =document.body.clientHeight "rn";//网页可见区域高
str =document.body.offsetWidth "rn";//网页可见区域高(包括边线的宽)
str =document.body.offsetHeight "rn";//网页可见区域高(包括边线的宽)
str =document.body.scrollWidth "rn";//网页正文全文宽
str =document.body.scrollHeight "rn";//网页正文全文高
str =document.body.scrollTop "rn";//网页被卷去的高
str =document.body.scrollLeft "rn";//网页被卷去的左
str =window.screenTop "rn";//网页正文部分上
str =window.screenLeft "rn";//网页正文部分左
str =window.screen.height "rn";//屏幕分辨率的高
str =window.screen.width "rn";//屏幕分辨率的宽
str =window.screen.availHeight "rn";//屏幕可用工作区高度
str =window.screen.availWidth "rn";//屏幕可用工作区宽度
alert(str);
}
</script>

复制代码

 代码如下

[ad#content]在JS操作DOM的时候,会经常用到浏览器的高度和宽度来调节DOM的位置,这里特别记录一下。

2、虽然window有宽度和高度信息,但是不一定是真正浏览器窗口的真正的宽度和高度信息。因为有些浏览器返回的结果中就不含菜单栏、工具栏等的高度信息。

这里特别提示两点:

1、document.body.scrollTop与document.body.clientHeight有的时候是无效的,究其原因是因为声明了DOCTYPE:

 

复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
当声明了DOCTYPE以后,document.body.scrollTop的值永远等于0,解决的办法是把document.body用document.documentElement替换即可。

 代码如下

 代码如下

window.onload = window.onresize = function () {
            var top = Math.round(Browser.Page.scrollTop() (Browser.ViewPort.height() / 2) - (parseInt(document.getElementById("divCenter").style.height) / 2));
            var left = Math.round(Browser.Page.scrollLeft() (Browser.ViewPort.width() / 2) - (parseInt(document.getElementById("divCenter").style.width) / 2));
            document.getElementById("divCenter").style.top = top "px";
            document.getElementById("divCenter").style.left = left "px";
}

在一个垂直内容过多的页面中,使一个DIV总能保持在视口的中心位置(非精确中心位置):

function calc_scroll_xy()
{
    _browser_scroll_x = 0;
    _browser_scroll_y = 0;
    if( typeof( window.pageyoffset ) == 'number' )
    {
        //netscape compliant
        _browser_scroll_y = window.pageyoffset;
        _browser_scroll_x = window.pagexoffset;
    } else if( document.body && ( document.body.scrollleft || document.body.scrolltop ) )
用js小类库获取浏览器的高度和宽度信息_javascript技巧_脚本之家【彩世界平台官方网址】。    {
        //dom compliant
        _browser_scroll_y = document.body.scrolltop;
        _browser_scroll_x = document.body.scrollleft;
    }
    else if( document.documentelement && ( document.documentelement.scrollleft || document.documentelement.scrolltop ) )
    {
        //ie6 standards compliant mode
        _browser_scroll_y = document.documentelement.scrolltop;
        _browser_scroll_x = document.documentelement.scrollleft;
    }
用js小类库获取浏览器的高度和宽度信息_javascript技巧_脚本之家【彩世界平台官方网址】。}

2、window.screenTop 与window.screenLeft在Firefox中是没有定义的,它仅能在IE里发挥作用,指的是网页正文部分上与显示器屏幕上的边的距离,刚测试这个的时候我也不是很清楚,其实这个高度也是很有用的,当你需要使用open函数打开一个窗口的时候,就可以利用这个距离来给新打开的窗口定位。

 

本文由彩世界开奖app官网发布于彩世界平台官方网址,转载请注明出处:用js小类库获取浏览器的高度和宽度信息_javascr

关键词: 脚本 之家 宽度 类库