js各种宽高(2)
在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)的更多相关文章
- js/jq宽高的理解与运用
document:1. 与client相关的宽高document.body.clientWidthdocument.body.clientHeightdocument.body.clientLeftd ...
- js各种宽高(1)
在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之 ...
- 原生js获取宽高与jquery获取宽高的方法的关系
说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况. 2.以下所说的所有方法与属性所返回的值都是不带单位的. 3.为了方便说明,以下情况采用缩写表示: obj -> ...
- JS 各种宽高
1.window的各种宽高 outerWidth.innerWidth.outerHeight.innerHeight outerHeight 获取浏览器窗口外部的高度(单位:像素).表示整个浏览 ...
- js 浏览器 宽高 各种
常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((do ...
- js常用宽高属性
document.body.clientWidth //body对象的宽度 document.body.clientHeight //body对象的高度 document.documentElemen ...
- js获取宽高
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...
- js各种宽高(3)
有时候项目中会用到用js获取元素位置来定位元素,首先通过图片说明scrollWidth,clientWidth,offsetWidth的关系. JS获取各种宽度.高度的简单介绍: scrollHeig ...
- JS/jQuery宽高的理解和应用
1.widows:窗口.window对象可省略 2.document对象是window对象的一部分 浏览器的Html文档成为Document对象 window.location===document. ...
随机推荐
- shell local
Shell函数定义的变量默认是global的,其作用域从"函数被调用时执行变量定义的地方"开始,到shell结束 http://blog.chinaunix.net/xmlrpc. ...
- inno setup 在卸载时如果想保留文件 使用uninsneveruninstall
一般来说,inno只卸载你安装的文件,自动生成如Thumb.db(缩略图)等文件,卸载程序是不会删除这些的,此时你希望整个安装目录删除则可用你说的方法删除.若想保留某些文件,则必须在[File]段中拷 ...
- android github
Action Bars ActionBarSherlock Extended ActionBar FadingActionBar GlassActionBar v7 appcompat library ...
- Django – query not equal
The simpliest way to retrieve data from tables is take them all. To do this, you can write: 1 all_e ...
- windows查看端口占用
查看占用端口的进程ID netstat -aon | findstr "9000" 再用进程ID查看进程 tasklist | findstr "6048"
- IntelliJ IDEA显示行号方法
File->Settings->Editor->General->Appearence->Show line numbers
- php mysql_select_db实例
在php中,我们经常需要连接数据库和操作数据库, 在操作数据库之前,我们需要选择一个数据库,本文章通过实例向小伙伴们介绍php mysql_select_db选择数据库的使用方法. 首先介绍一下mys ...
- HDU 2209 翻纸牌游戏 状态BFS
翻纸牌游戏 Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Problem De ...
- jquery实现跨域提交(原创)
jquery实现跨域提交(原创) 我们在运营一个产品的时候往往会遇到这样那样的表单提交,如客户数据收集.申请加盟.意见反馈等,由此我们开发了这样一个产品,可以理解为万能型数据收集平台,不难想到,我 ...
- CODESOFT中怎样打印数据库中的特定数据?
CODESOFT可用于打印.标记和跟踪的零售库存标签软件,每种产品的售卖都代表着需要打印大量的条码标签.通常我们采用的方法就是在CODESOFT连接数据库批量打 印.但是如果数据量很大,该如何选择 ...