首页 > Web开发 > 详细

jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

时间:2018-07-13 01:01:27      阅读:35      评论:0      收藏:0      [点我收藏+]

标签:有关   del   core   body   pla   port   log   path   jstl   

前言:jquery 对象的 height、innerHeight、outerHeight,还有 DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop 概念一直都很模糊,借此写个demo看看。

举例看看 jquery 对象的 height、innerHeight、outerHeight 几个区别:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<html>

<head>
    <title>测试</title>
    <style>
        #div1{
            border: 1px solid;
            height: 200px;
            width: 200px;
            padding: 10px;
            margin: 20px;

            /*浮动*/
            overflow: auto;
        }
    </style>
</head>
<body>

<div id="div1">
    <div>sdf</div>
    <div>地方</div>
    <div>水电费</div>
    <div>史蒂夫</div>
    <div>鬼地方个</div>
    <div>史3玩儿</div>
    <div>史3水电费玩儿</div>
    <div>212</div>
    <div>435 </div>
    <div>电饭锅</div>
    <div>规划局</div>
    <div>好久</div>
    <div>水电费</div>
    <div>史3水电费玩儿</div>
    <div>34</div>
    <div></div>
    <div>45</div>
    <div>sdf</div>
    <div>地方</div>
    <div>水电费</div>
    <div>史蒂夫</div>
    <div>鬼地方个</div>
    <div>史3玩儿</div>
    <div>史3水电费玩儿</div>
    <div>212</div>
    <div>435 </div>
    <div>电饭锅</div>
    <div>规划局</div>
    <div>好久</div>
    <div>水电费</div>
    <div>史3水电费玩儿</div>
    <div>34</div>
    <div></div>
    <div>45</div>
</div>

<script type="text/javascript" src="${ctx}/static/common/js/jquery-1.8.1.min.js"></script>

<script type="text/javascript">

    var $div = $("#div1");
    //262 222 220 200
    console.log($div.outerHeight(true), $div.outerHeight(false), $div.outerHeight(), $div.innerHeight(), $div.height());

    var div = $div[0];
    //220 222 734 20 0
    console.log(div.clientHeight, div.offsetHeight, div.scrollHeight, div.offsetTop, div.scrollTop);

</script>

</body>

</html>
//262 222 220 200
console.log($div.outerHeight(true), $div.outerHeight(false), $div.outerHeight(), $div.innerHeight(), $div.height());

outerHeight 高度为:元素自身高度 + padding + border ;如果参数为true时,高度为:元素自身高度 + padding + border +margin

技术分享图片

 

技术分享图片

 innerHeight 包括元素自身的高度+padding部分

 技术分享图片

height 指的是元素本身的高度,不包括padding、border、margin

技术分享图片

 

然后看看 DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop 区别

每个HTML元素都具有 clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个属性,这些是和元素高度、滚动、位置相关的属性。其中 clientHeight、offsetHeight 和元素的高度有关,scrollHeight、scrollTop 与滚动有关,offsetTop与父元素有关。

var div = $div[0];
    //220 222 734 20 0
    console.log(div.clientHeight, div.offsetHeight, div.scrollHeight, div.offsetTop, div.scrollTop);

clientHeight:包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。
技术分享图片

offsetHeight:包括padding、border、水平滚动条,但不包括margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。

技术分享图片

scrollHeight: 因为子元素比父元素高,父元素不想被子元素撑的一样高就显示出了滚动条,在滚动的过程中本元素有部分被隐藏了,scrollHeight代表包括当前不可见部分的元素的高度。而可见部分的高度其实就是clientHeight,也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义,在没有滚动条时scrollHeight==clientHeight恒成立。单位px,只读元素。

技术分享图片

scrollTop: 代表在有滚动条时,滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px,可读可设置。

技术分享图片


offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px,只读元素。

技术分享图片

 

参考:http://www.imooc.com/article/17571 

 

jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

标签:有关   del   core   body   pla   port   log   path   jstl   

原文:https://www.cnblogs.com/yuxiaole/p/9298027.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号