计算机知识

当前位置:澳门新葡萄京 > 计算机知识 > 会经常用到浏览器的高度和宽度来调节DOM的位置

会经常用到浏览器的高度和宽度来调节DOM的位置

来源:http://www.hhmtch.com 作者:澳门新葡萄京 时间:2019-11-21 10:29

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

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

 代码如下

复制代码

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

这里特别提示两点:

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替换即可。

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

 代码如下

复制代码

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 ) )
    {
        //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;
    }
}

JQuery:

 代码如下

复制代码

$(document).ready(function(){
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

})

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() / 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";
}

 

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

本文由澳门新葡萄京发布于计算机知识,转载请注明出处:会经常用到浏览器的高度和宽度来调节DOM的位置

关键词: 新萄京娱乐

上一篇:如果两棵树对应的节点都为空

下一篇:没有了