zoukankan      html  css  js  c++  java
  • js获取各种高度和宽度

    Javascript:

    IE中:

    document.body.clientWidth ==> BODY对象宽度
    document.body.clientHeight ==> BODY对象高度
    document.documentElement.clientWidth ==> 可见区域宽度
    document.documentElement.clientHeight ==> 可见区域高度
    FireFox中:
    document.body.clientWidth ==> BODY对象宽度
    document.body.clientHeight ==> BODY对象高度
    document.documentElement.clientWidth ==> 可见区域宽度
    document.documentElement.clientHeight ==> 可见区域高度
    Opera中:
    document.body.clientWidth ==> 可见区域宽度
    document.body.clientHeight ==> 可见区域高度
    document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
    document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

    alert(document.body.clientWidth);        //网页可见区域宽(body)

    alert(document.body.clientHeight);       //网页可见区域高(body)

    alert(document.body.offsetWidth);       //网页可见区域宽(body),包括border、margin等

    alert(document.body.offsetHeight);      //网页可见区域宽(body),包括border、margin等

    alert(document.body.scrollWidth);        //网页正文全文宽,包括有滚动条时的未见区域

    alert(document.body.scrollHeight);       //网页正文全文高,包括有滚动条时的未见区域

    alert(document.body.scrollTop);           //网页被卷去的Top(滚动条)

    alert(document.body.scrollLeft);           //网页被卷去的Left(滚动条)

    alert(window.screenTop);                     //浏览器距离Top

    alert(window.screenLeft);                     //浏览器距离Left

    alert(window.screen.height);                //屏幕分辨率的高

    alert(window.screen.width);                 //屏幕分辨率的宽

    alert(window.screen.availHeight);          //屏幕可用工作区的高

    alert(window.screen.availWidth);           //屏幕可用工作区的宽

    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

    计算的是body的宽度和高度,不包括border(重点)

     alert(document.body.clientWidth);获取网页的可见区域宽度,会受到屏幕的大小切换而发生变化,在谷歌和火狐上,IE最大是1333(电脑端),在手机调试下,谷歌默认都是964,火狐是按照手机的实际屏幕显示,而且发现火狐浏览器手机调试时,alert失效了。

     alert(document.body.clientHeight);获取网页可见区域的高度,会受到屏幕的大小切换而发生变化,根据内容来展示,会包括margin和padding.具体是多少在每个浏览器下面有一些差别。

    计算的是body的宽度和高度,包括border(重点)
     alert(document.body.offsetWidth);同上类似,不过包括border.

     alert(document.body.offsetHeight);同上类似,不过包括border.
    计算的是网页网页正文全文宽,包括有滚动条时的未见区域,从滚动条的一侧到另外一侧。(也就是说内容有好宽,好长,就有好宽好长);注意不包括border

     alert(document.body.scrollWidth);

     alert(document.body.scrollHeight);感觉等价与document.body.clientHeight

    获取滚动条的位置(即距离顶部的距离);注意有兼容性问题

    如果头部申明的DTD的严格模式或是html5模式,注意谷歌,ie,火狐始终为0;

    document.body.scrollTop 网页被卷去的Top(滚动条位置)。建议需要做兼容性考虑。(手机端做测试时,经常出问题,建议使用jqery的方法);

    var heightTop = document.documentElement.scrollTop || document.body.scrollTop||

    window.pageYOffset;
    同理
    document.body.scrollLeft 网页被卷去的Left(滚动条位置),兼容性考虑

     var left= document.documentElement.scrollLeft || document.body.scrollLeft||

    window.pageXOffset;

    screenLeft和screenTop属性返回窗口相对于屏幕的X和Y坐标。(注意firbox没有这个属性, Firefox 浏览器请使用 "window.screenX" and "window.screenY")

    pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

    pageXOffset 和 pageYOffset 属性相等于 scrollX 和 scrollY 属性。

     window.screen.height,window.screen.width表示屏幕的总高度和宽度,注意包括页面可见区域部分加上工具栏,标题栏这些。(常用于对用户屏幕的获取);

     window.screen.availHeight,window.screen.availWidth 获取屏幕的可见区域的高度和宽度(不包括任务栏部分);

    注意不包括菜单栏、工具栏以及滚动条等的高度(IE不支持)
    window.innerWidth:可视窗口宽度(包括滚动轴宽度)://IE9+、Chrome、Firefox、Opera 以及 Safari
    window.innerHeight:可视窗口高度,不包括浏览器顶部工具栏://IE9+、Chrome、Firefox、Opera 以及 Safari
    注意和 ,window.screen.availWidth 的区别

    screen:屏幕。这一类取到的是关于屏幕的宽度和距离,与浏览器无关,应该是获取window对象的属性。
    client:使用区、客户区。指的是客户区,当然是指浏览器区域。
    offset:偏移。指的是目标甲相对目标乙的距离。
    scroll:卷轴、卷动。指的是包含滚动条的的属性。
    inner:内部。指的是内部部分,不含滚动条。
    avail:可用的。可用区域,不含滚动条,易与inner混淆。

    window.innerWidth/innerHeight:浏览器可见区域的内宽度、高度(不含浏览器的边框,但包含滚动条)。兼容:ie9/10、chrome、firefox。
    window.screen.availWidth/availHeight:屏幕的可用宽度、高度(通常与屏幕的宽度、高度一致)。兼容性:ie6/7/8/9/10、chrome、firfox
    window.outerHeight:整个浏览器可用工作区高度(包括所有界面元素,如工具栏、滚动条)
    window.outerWidth:整个浏览器可用工作区宽度(包括所有界面元素,如工具栏、滚动条)

    JQuery

     alert($(window).height());             //浏览器当前窗口可视区域高度(谷歌,firefox,IE都支持);在手机调试上最清楚,firefox和手机屏幕大小是一致,谷歌不是这样子,类似于是网页可见区域高度,但是并不是完全是这样的。可以随着屏幕的大小发生改变

    alert($(window).width());              //浏览器当前窗口可视区域宽度,谷歌和火狐,IE的电脑模式一样的展现,但是在手机模式下,谷歌默认是980,经过测试确实是当前窗口的宽度,不随着手机屏幕改变而改变,但是火狐浏览器遵循手机屏幕的大小。

     一般不会随着屏幕的改变而改变,除非是样式的改变。

    alert($(document).height());                        //浏览器当前窗口文档的高度

     alert($(document).width());                        //浏览器当前窗口文档对象宽度

     alert($(document.body).height());                //浏览器当前窗口文档body的高度

     alert($(document.body).width());                //浏览器当前窗口文档body的宽度

    补充:

    $(document):整个文档
    $("body"):body
    $(window):视口(有设doctype的前提下)

    1)、页面内容大于视口(浏览器窗口)时:$(document).height() = $("body").height() > $(window).height();

    2)、页面内容小于视口时:$(document).height() = $(window).height() > $("body").height();

    另:$(window).height()还受页头DOCTYPE的影响,在此默认为有DOCTYPE的前提。 

    不加true表示不包括外边距,margin,一般试计算具体元素,标签这些,不适用doucument或者screen,注意对隐藏元素一样适用

    alert($(document.body).innerHeight())//获取匹配元素内部区域高度(包括补白、不包括边框)

    alert($(document.body).innerWidth())//获取匹配元素内部区域kuandu(包括补白、不包括边框)

     alert($(document.body).outerHeight(true));  //浏览器当前窗口文档body的总高度 包括border padding margin

     alert($(document.body).outerWidth(true));  //浏览器当前窗口文档body的总宽度 包括border padding margin

    alert($(document).scrollTop()) 获取垂直滚动的距离 (即当前滚动的地方的窗口顶端到整个页面顶端的距离)
    alert($(document).scrollLeft() )这是获取水平滚动条的距离

    其他补充没有测试

    scrollHeight: 获取对象的滚动高度。
    scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
    scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
    scrollWidth:获取对象的滚动宽度
    offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
    offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
    offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
    event.clientX 相对文档的水平座标
    event.clientY 相对文档的垂直座标


    event.offsetX 相对容器的水平坐标
    event.offsetY 相对容器的垂直坐标
    document.documentElement.scrollTop 垂直方向滚动的值
    event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
    要获取当前页面的滚动条纵坐标位置,用:
    document.documentElement.scrollTop;
    而不是:
    document.body.scrollTop;
    documentElement 对应的是 html 标签,而 body 对应的是 body 标签

    原文链接:https://www.cnblogs.com/yulintianxia/p/9385595.html

  • 相关阅读:
    Neutron介绍
    docker下jenkins环境搭建
    OpenStack allinone环境搭建
    go中channel的部分理解
    总结一下我的面试经历
    MYSQL基础总结(1)
    struts2中判断数组的长度
    antd组件Checkbox
    React使用antd组件Radio
    React使用Echarts
  • 原文地址:https://www.cnblogs.com/Salicejy/p/11216972.html
Copyright © 2011-2022 走看看