jQuery中的高度与定位

原创 2016年08月29日 20:57:58

jQuery中的高度与定位(offset(),position())

  我们知道,高度或者宽度是由外边距(margin)、边框(border)、元素样式定义的高度或宽度(height/width)、内边距(padding)组成的。

height()与outerHeight()的不同

  height():Get the current computed height for the first element in the set of matched elements。
  也就是拿到第一个匹配的元素计算后的高度。那么什么是计算后的高度呢?
  
  我们可以用window.getComputedStyle(domElement,伪元素/null)这个对象来获得。在IE中的写法是domElement.currentStyle这个对象来获得。所以兼容的写法是:

var oStyle = function(domEle){
    return window.getComputedStyle(domEle,null) || domEle.currentStyle
}

  outerHeight():Get the current computed height for the first element in the set of matched elements, including padding, border, and optionally margin。
  拿到第一个匹配的元素计算后的高度,包括padding,border。也可能包括margin(通过设置参数true实现)。也就是说,它至少包括内边距、边框。
  
  对比我们可以明显发现了,outerHeight()>=height();并且他们是没有单位(如px)的。而要通过oStyle拿到样式(如高度)是有单位的。oStyle(document.getElementById('box')).height

$(window).height()

  总是返回视口的高度。就是我们写的页面的可见区域。不包括滚动条导致的不可见区域。

$(document).height()

  整个页面所有的高度,包括不可见区域。包括内边距(padding),边框(border),外边距(margin)。有趣的是,它的值总是与document.body.outerHeight(true)的值相等。至少在chrome 52 和 firefox 47是这样,当然可能的是,我没有考虑到所有情况,还有遗漏的情况,欢迎补充啊。

$(document.body).height()

  就是body的高度。由元素填充起来的body的高度。不包括body自身设置的padding,border,margin。

$(‘div.box:first’).offset().top

  与原生Javascript所不同的是,这里的offset()是相对于文档的。w3c给出的解释是:

offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。

  这个解释有点模糊啊。文档?padding算不算?border算不算?margin算不算?哎呀,到底算不算啊!!!
  
  答案是:算!算!算!都算!从div.box:first的border最外边开始(margin不算在内,margin在border外,有margin距离会减小。可以脑补一下)到文档的顶端—-文档margin的最外端。简单点:$(div.box:first).outerHeight()的border最外端(没margin)与$(document.body).outerHeight(true)的顶端(margin的最外部分)的距离。**在我的测试中是60。见下图和关键代码。
  
  而JavaScript中的offsetTop是相对于父元素的。无论父元素是不是body元素。

$(‘div.box:first’).position().top

  这个类似于原生JavaScript中的offsetTop。是相对于父元素的。
  
  根据我的实验。这个距离是div.box:first元素的外边距(margin)的顶端与父元素(这里是wrapper,和body重叠了)开始的地方的距离,是不包括body的内边距的。简单点:$(div.box:first).outerHeight(true)顶端(最外部分)与$(document.body).height()的顶端(元素起始部分)的距离。在我的测试中是20。见下图和关键代码。
  
  一图胜千言啊。下面贴张图大家都会明白的。这里写图片描述再加上关键代码:
  

body{
        border:10px solid aquamarine;
        margin:15px;
        padding:7px;
    }
    .box{
        width:100px;
        height:100px;
        background:red;
    }
    .wrapper{
        position:relative;
    }
    div.box:first-child{
        position:absolute;
        top:20px;
        margin:8px;         
        padding:10PX;
        background:green;
        border:10px solid yellow;
    }

小结

height:仅仅是样式的height属性。
outerHight:包括内边距,边框。
outerHeight(true):包括内边距,边框,外边距。
offset().top:当前元素border最外边(没有边框从元素顶部开始算)和body顶端(页面可视区域最上端)距离。
position().top:当前元素margin最外边和body中元素开始部分的距离。

  这几个常用的高度定位什么的,暂时算是弄懂了吧。以后可能回忘记,忘了回来看看便是。width啊,left啊,我就没测试了。但想来是一样的。再见!

版权声明:本文为博主原创文章,未经博主允许不得转载。

jQuery 定位到页面具体位置

通过jQuery的aminate动画方法定位。 示例如下: scrollOffset($("#qa").offset());       // jQuery 定位让body的scrol...
  • wangxin_wangxin
  • wangxin_wangxin
  • 2013年12月26日 13:42
  • 10933

jquery 在页面上根据ID定位(jQuery锚点跳转及相关操作) 经典

1.锚点跳转简介 Edit 锚点其实就是可以让页面定位到某个位置上的点。在高度较高的页面中经常见到。比如百度的百科页面,wiki中的page内容。 我知道实现锚点的跳转有两种形式...
  • huaishuming
  • huaishuming
  • 2013年05月20日 17:29
  • 30731

【jQuery】用jQuery实现定位滚动导航效果

在平时写官网代码的过程中,我们经常可以碰到这样的一个情况:在顶部有一个总的导航,然后接下来会有一个banner,在banner的下面会有一个二级导航,二级导航的每个页面都有一定的内容,为了显示更友好,...
  • u010297791
  • u010297791
  • 2017年06月26日 20:42
  • 738

使用jQuery实现网页定位导航

使用jQuery实现网页定位导航
  • Phoebe_16
  • Phoebe_16
  • 2016年07月16日 22:44
  • 1446

JavaScript与jQuery中获取屏幕的宽度和高度的常用方法以及HTML中精确定位

浏览器的宽高示意图: JavaScript中常用的方法: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHe...
  • shenlei19911210
  • shenlei19911210
  • 2015年08月11日 09:20
  • 1942

css中高度塌陷介绍以及定位介绍

高度塌陷 高度塌陷的解决 css定位介绍
  • mutouafangzi
  • mutouafangzi
  • 2017年05月21日 09:02
  • 682

CSS中绝对定位对子元素height的影响

CSS中height:100%和height:inherit的异同 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http...
  • SYYling
  • SYYling
  • 2015年07月17日 10:46
  • 2834

jquery实现高度的获取-位置函数

$(window).height();//是文档窗口高度 $("div").offset().top//是标签距离顶部高度 $(document).scrollTop();//是滚动条高度 $("di...
  • abeetle
  • abeetle
  • 2014年06月13日 13:05
  • 11290

jQuery获取与设置div的宽高

有两种方法获取与设置div的宽高:使用尺寸函数或使用css方法 获取宽高 1. 尺寸函数:height() 获取高度,width() 获取宽度 2. css获取div宽高:css("height"...
  • suiyu1992
  • suiyu1992
  • 2016年07月30日 16:41
  • 8266

JS及jQuery获取各种宽度、高度的简单介绍以及判断滚动条滚动到底部事件

JS获取各种宽度、高度的简单介绍: JS获取各种宽度、高度的简单介绍: scrollHeight: 获取对象的滚动高度。  scrollLeft:设置或获取位于对象左边界和窗...
  • xiejinwen
  • xiejinwen
  • 2017年05月18日 23:46
  • 1742
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery中的高度与定位
举报原因:
原因补充:

(最多只允许输入30个字)