在javascript和jquery中,都有对各种高度的写法,在这里,我们就着重讲一下窗口、文档等高度的理解。(宽度和高度差不多!)

jquery的各种高度

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

 

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

 

$(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()

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

 

innerHeight(value)

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

jquery高度,放到浏览器中试一下

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

 

javascript的各种高度

 

网页可见区域宽[仅针对body]: document.body.clientWidth网页可见区域高[仅针对body]: document.body.clientHeight网页可见区域宽[仅针对body]: document.body.offsetWidth (包括滚动条和边框,若滚动条和边框为0,则和clientWidth相等)网页可见区域高[仅针对body]: document.body.offsetHeight (包括滚动条和边框,若滚动条和边框为0,则和clientHeight相等)可视窗口宽度(包括滚动轴宽度):window.innerWidth; //IE9+、Chrome、Firefox、Opera 以及 Safari可视窗口高度,不包括浏览器顶部工具栏: window.innerHeight;//IE9+、Chrome、Firefox、Opera 以及 Safari网页正文全文宽(不包括滚动轴的宽度): document.body.scrollWidth网页正文全文高:document.body.scrollHeight//假如网页中没有滚动轴,document.body.scrollWidth和window.innerWidth相等,document.body.scrollHeight和window.innerHeight相等。网页被卷去的高: document.body.scrollTop网页被卷去的左: document.body.scrollLeft网页正文部分上: window.screenTop网页正文部分左: window.screenLeft屏幕分辨率的高(整个屏幕的高度): window.screen.height屏幕分辨率的宽(整个屏幕的宽度): window.screen.width屏幕可用工作区高度: window.screen.availHeight屏幕可用工作区宽度: window.screen.availWidth整个浏览器可用工作区高度: window.outerHeight整个浏览器可用工作区宽度: window.outerWidth

注意,在运用jquery的innerHeight()和outerHeight()的时候,可能会有浏览器的兼容问题,不同浏览器出现不同高度,总之,实践得真知,你可以测试一下,写几个小的demo,总结一下!

原博

js各种宽高(2)的更多相关文章

  1. js/jq宽高的理解与运用

    document:1. 与client相关的宽高document.body.clientWidthdocument.body.clientHeightdocument.body.clientLeftd ...

  2. js各种宽高(1)

    在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之 ...

  3. 原生js获取宽高与jquery获取宽高的方法的关系

    说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况.  2.以下所说的所有方法与属性所返回的值都是不带单位的.  3.为了方便说明,以下情况采用缩写表示:  obj -> ...

  4. JS 各种宽高

    1.window的各种宽高   outerWidth.innerWidth.outerHeight.innerHeight outerHeight 获取浏览器窗口外部的高度(单位:像素).表示整个浏览 ...

  5. js 浏览器 宽高 各种

    常用: JS 获取浏览器窗口大小   // 获取窗口宽度   if (window.innerWidth)   winWidth = window.innerWidth;   else if ((do ...

  6. js常用宽高属性

    document.body.clientWidth //body对象的宽度 document.body.clientHeight //body对象的高度 document.documentElemen ...

  7. js获取宽高

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

  8. js各种宽高(3)

    有时候项目中会用到用js获取元素位置来定位元素,首先通过图片说明scrollWidth,clientWidth,offsetWidth的关系. JS获取各种宽度.高度的简单介绍: scrollHeig ...

  9. JS/jQuery宽高的理解和应用

    1.widows:窗口.window对象可省略 2.document对象是window对象的一部分 浏览器的Html文档成为Document对象 window.location===document. ...

随机推荐

  1. T450设置插入USB鼠标时自动禁用触摸板

    刚入手T450,打字时经常碰到触摸板,很是恼火,于是求助万能的度娘,找了卡饭基佬的教程,实测可行,大家可以试试.<win7下如何设置插入USB鼠标时自动禁用触摸板>,地址:www.kafa ...

  2. Delphi进制转换(二进制/十进制/十六进制)

    http://www.cnblogs.com/ywangzi/archive/2012/12/12/2815219.html   Delphi进制转换(二进制/十进制/十六进制)  2009-11-2 ...

  3. 在AE中通过指定中心点和半径画圆

    /// <summary>/// 通过指定的中心点.半径画圆/// </summary>/// <param name="pLayer">要画的 ...

  4. [HTML5] document.hidden

    特殊说明: 通过document.hidden属性,可判断页面是否可见. 如果不可见,则document.hidden为true. 如果可见, 则为false. 但是, 如果该页面只是被其它窗口挡住, ...

  5. OpenGL ES为缓存提供数据的7个步骤

    OpenGL ES为缓存提供数据的7个步骤: 1.生成glGenBuffers()——请求OpenGL ES为图形处理器控制的缓存生成一个独一无二的标识符. 2.绑定glBindBuffer()——告 ...

  6. Runtime机制之结构体及操作函数

    一.动态语言 Objective-C语言是一门动态语言,它将很多静态语言在编译和链接时期做的事放到了运行时来处理.这种动态语言的优势在于:具有灵活性,比如:消息转发,方法交换等.它有一个运行时系统Ob ...

  7. only one is important

    今天早上还是去了图书馆,看了一早上的hello world(intel opencl),清楚了程序编写的基本流程,但是,仍和以前一样,貌似看懂了,其实什么也不会,没有发现什么问题.中午,回来取了我的笔 ...

  8. Swift学习—字符串&数组&字典

    字符串 OC和Swift中字符串的区别 在OC中字符串类型时NSString,在Swift中字符串类型是String OC中字符串@"",Swift中字符串"" ...

  9. php 数组转json格式

    1.php若为关系数组:转化为由花括号包围的对象: 输入:$test = array("1"=>1,"2"=>2,"3"=> ...

  10. 图解CISCO 3550忘记密码解决方法

    图解CISCO3550忘记密码解决方法 Cisco网络设备密码忘记怎么初始出厂默认值?这时网友常常会提出的问题,怎么解决,有人说啦,去百度去谷歌一下不就行啦,然而这对初学者任是个挑战,虽然步骤只有简单 ...