zoukankan      html  css  js  c++  java
  • jquery的height()和javascript的height总结,js获取屏幕高度

    jquery的各种高度

    首先来说一说$(document)和$(window),如下:

    $(document).height();//整个网页的高度
    $(window).height();//浏览器可视窗口的高度
    $(window).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度(垂直偏移)

    用一句话理解就是:当网页滚动条拉到最低端时,

    $(document).height() == $(window).height() + $(window).scrollTop()。
    

      

    注意,是拉到最低端!

    当网页高度不足浏览器窗口时$(document).height()返回的是$(window).height()

    假如您要获取整个网页的高度,不建议用$("html").height()、$("body").height()的高度,

    原因:

    $("body").height():body可能会有边框,获取的高度会比$(document).height()小; $("html").height():在不同的浏览器上获取的高度的意义会有差异,说白了就是浏览器不兼容。

    说道这里,提及边框和margin还有padding,我们自然想到了jquery的另外的两个高度,那就是innerHeight()和outerHeight()

    innerHeight()和outerHeight()不适用于window 和 document对象,对于window 和 document对象可以使用.height()代替。innerHeight()和outerHeight()主要用来获取标签的高度。

    innerHeight()

    enter image description here

    innerHeight:高度+补白
    
    outerHeight:高度+补白+边框,参数为true时:高度+补白+边框+边距
    

      

    innerHeight(value)

    这个“value”参数可以是一个字符串(数字加单位)或者是一个数字,如果这个“value”参数只提供一个数字,jQuery会自动加上像素单位(px)。如果只提供一个字符串,任何有效的CSS尺寸都可以为高度赋值(就像100px, 50%, 或者 auto)。注意在现代浏览器中,CSS高度属性不包含padding, border, 或者 margin, 除非box-sizingCSS属性被应用。

    javascript的各种高度

    网页可见区域宽: document.body.clientWidth
    网页可见区域高: document.body.clientHeight
    网页可见区域宽: document.body.offsetWidth (包括边线的宽)
    网页可见区域高: document.body.offsetHeight (包括边线的高)
    网页正文全文宽: document.body.scrollWidth
    网页正文全文高: document.body.scrollHeight
    网页被卷去的高: document.body.scrollTop
    网页被卷去的左: document.body.scrollLeft
    网页正文部分上: window.screenTop
    网页正文部分左: window.screenLeft
    屏幕分辨率的高: window.screen.height
    屏幕分辨率的宽: window.screen.width
    屏幕可用工作区高度: window.screen.availHeight
    屏幕可用工作区宽度: window.screen.availWidth
    

      

  • 相关阅读:
    农夫安全第二季课程-3.vmware ESXIv2
    六、表达式:前缀&&后缀
    五、数据类型(1):整数&&带小数点的数
    四、变量和常量
    三、简单的输入输出
    二、第一个C程序:Hello World!
    一、环境的安装Dev-C++
    .Net基础之5——复杂数据类型
    .Net基础之4——流程控制
    .Net基础之3——运算符
  • 原文地址:https://www.cnblogs.com/timejs/p/4903240.html
Copyright © 2011-2022 走看看