一.位置函数

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. 第一章 Java常用集合类总览

    1.Java最常用的集合类 Collection接口 List接口(允许有重复元素):ArrayList.LinkedList.Vector.Stack Set接口(不允许有重复元素,可用于去重操作) ...

  2. string.Format对C#字符串格式化[转]

    string.Format对C#字符串格式化 String.Format 方法的几种定义: String.Format (String, Object) 将指定的 String 中的格式项替换为指定的 ...

  3. JS操作JSON常用方法

    一.JSON字符串的替换 工作经常遇到这样的字符串,如下: 需要经过替换后,才能从字符串转化成JSON对象.这里我们需要用JS实现replaceAll的功能, 将所有的 ' \\" ' 替换 ...

  4. file not found app文件

    昨天svn迁移.然后又一次check out之后编译遇到这个错误. Ld Build/Products/Debug-iphonesimulator/wiseCloudCrmTests.xctest/w ...

  5. 【Struts2学习笔记(9)】单文件上传和多文件上传

    (1)单文件上传 第一步:在WEB-INF/lib下增加commons-fileupload-1.2.1.jar.commons-io-1.3.2.jar. 这两个文件能够从http://common ...

  6. [Functional Programming 101] runWIth, evalWith, execWith

    Recentlly, I am learning crocks.js ADT libaray. In the beginning, it is hard to understand when to u ...

  7. 在Foreda上安装apache-tomcat-7.0.42.tar.gz

    开发环境JDK和Tomcat应该和部署环境一致,要不容易出现奇奇怪怪的问题.所以Aspire机器上的Tomcat要装一个新版本了. 装Tomcat基本等于一个解压和移动的过程,确实简单. 第一步:解压 ...

  8. 【CSWS2014 Main Conference】Some Posters

    随机选了几张POSTER,之前没做过POSTER的同学可以看一下文字.图片.布局以及每个版块的小标题,以后如果需要做poster就容易多了. 据说这种Poster一张需要60RMB左右. 其中第5幅是 ...

  9. IOS学习笔记44--ASIRequestHttp之BUG(一)

    其实这也是无意间看到的,大家看看是不是这么回事 BUG:当下载线程数超过2时,就会影响到主线程响应用户请求的速度了 看ASIRequestHttp.m--requestFinished代码 - (vo ...

  10. 微信小程序 - 反编译线上源码

    github地址:https://github.com/qwerty472123/wxappUnpacker 不过我好像从来未成功过哈,TX地图+.TX公交都失败了 点击下载以上两个文件 哦,对了,你 ...