一.位置函数

1.offset()
获取匹配元素在当前视口的相对偏移。返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。

2.innerWidth()
获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。此方法对可见和隐藏元素均有效。返回值:整型数据
3.innerHeight()

获取第一个匹配元素内部区域高度(包括补白、不包括边框)。此方法对可见和隐藏元素均有效。返回值:整型数据
4.outerWidth()

 获取第一个匹配元素外部宽度(默认包括补白和边框)。此方法对可见和隐藏元素均有效。返回值:整型数据

5.outerHeight()
获取第一个匹配元素外部高度(默认包括补白和边框)。此方法对可见和隐藏元素均有效。返回值:整型数据
6.scrollTop()
获取匹配元素相对滚动条顶部的偏移。
7.scrollLeft()

获取匹配元素相对滚动条左侧的偏移

二..参考: js取高度

网页可见区域宽: 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

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

加一个参考图:

jquery实现高度的获取-位置函数的更多相关文章

  1. 使用jquery中height()方法获取各种高度大全

    alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(docum ...

  2. 解决jQuery在chrome中获取height为0

    笔者之前在一家创业公司做过项目,当时遇到这么一个奇怪的问题,我需要用一个jQuery的height()方法获取一个div的高度,但是在chrome浏览器上面有时可以正常获取,但是同一个页面刷新多几次获 ...

  3. jquery通过ajax方法获取json数据不执行success

    1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...

  4. jquery通过ajax方法获取json数据不执行success回调

    问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述 ...

  5. Jquery学习笔记:获取jquery对象的基本方法

    jquery最大的好处是将js对html页面的操作(读写)进行了封装,隔离了浏览器的差异性,并简化了操作,和提供了强大的功能. 在web页面中,所有的js操作都是围绕操作dom对象来的.而jquery ...

  6. 原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

    一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...

  7. jquery点击li 获取当前父节点所在类的索引

    jquery点击li 获取当前父节点所在类的索引 $('.jbcz').find('.content li').click(function(){ //alert($('.jbcz').find('. ...

  8. jquery 高度的获取

    alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(docum ...

  9. 使用jquery中height()方法获取各种高度

    $(window).height(); //浏览器当前窗口可视区域高度 $(document).height(); //浏览器当前窗口文档的高度 $(document.body).height();/ ...

随机推荐

  1. 【BZOJ】【3670】【NOI2014】动物园

    KMP算法 其实就像题面描述的那样……主要还是KMP算法的基础上搞一些DP(递推)之类…… 随便yy一下就可以得到50分了,因为num数组跟next的关系还是很密切的…… f[i]=f[next[i] ...

  2. Oracle中表列由VARCHAR2类型改成CLOB

    情景 原来表中的列定义成VARCHAR2类型,众所周知,VARCHAR2类型最大支持长度为4000.假设因为业务须要.想把此列转换为CLOB类型,在Oracle中直接通过ALTER语句转换是行不通的. ...

  3. Java 从基础到进阶学习之路---类编写以及文档凝视.

    Java之前在学习过,基础知识还没有忘光,并且这些高级语言实在是太像,所以那些数据类型,或者循环控制流,以及标准设备等等就直接略过不说了. 只是一些重大概念会穿插在文章的介绍中. So,这些文章适合于 ...

  4. go语言基础之结构体成员的使用普通变量

    1.结构体成员的使用普通变量 示例: package main //必须有个main包 import "fmt" //定义一个结构体类型 type Student struct { ...

  5. 你对position的了解有多少?

    此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...

  6. 关于vue单页面应用总是先出现主页一闪而过的现象

    问题描述:每次强制刷新登陆页面时,总是会出现主页一闪而过的现象,如果主页上有请求,还会请求后台数据.感觉不太正常,所以想到研究下为什么,然后去掉这个主页一闪而过的现象 1.先看下我之前的app的rou ...

  7. 用C语言获取任意文件的长度(可能大于2GB)

    用C语言获取文件长度的常见思路是: 打开文件后用 fseek() 函数把文件位置指针移动到文件的末尾,用 ftell() 获得这时位置指针距文件头的字节数,这个字节数就是文件的长度.但是这样做也会受到 ...

  8. Linux系统多网卡绑定实战

    导读 对于服务器来说,网络设备的稳定也是比较重要的,特别是网卡.在生产型的系统中,网卡的可靠性就更为重要了. 多块网卡绑定到一个IP地址,当一块网卡发生物理性损坏的情况下,另一块网卡自动启用,并提供正 ...

  9. 如何使用FLASHGOT下载网页FLASH

    1 注意火狐的广告屏蔽插件可能将一些有用的东西屏蔽掉,从而无法得到广告FLASH, 2 随后即可在桌面上找到所需文件 你也可以按住A/T并单击FLASH文件(不论鼠标是否被替换为其他图形)迅雷会自动探 ...

  10. Cass环境下光标无显示

    先安装CAD2004,十字光标正常显示:再安装CASS7.0,光标就不显示了.现在不清楚是CAD的问题,还是CASS的问题,多半是后者.重新配置了CASS环境也不行. 于是,打开CAD选项,显示,窗口 ...