11. jQuery 获取元素尺寸

   jQuery 获取元素尺寸

获取元素尺寸有三套方法四种使用方式
+ 不管在页面是不是占位, 这些方法都是获取元素的尺寸 意思是不管能不能看到 能算 原生的Js中 如果display none 的话 是获取不了的 会报错 而JQ不影响 你可以自己去尝试一下！

 

1. width() 和 height()
=> 语法: 元素集合.width() 或者 元素集合.height()
=> 获取的是元素内容位置的尺寸 （仅内容）


2. innerWidth() 和 innerHeight()
=> 语法: 元素集合.innerWidth() 或者 元素集合.innerHeight()
=> 获取的是元素 内容 + padding 区域的尺寸　　（内 容 + 内边距    =  innerXXX）


3. outerWidth() 和 outerHeight()
=> 语法: 元素集合.outerWidth() 或者 元素集合.outerHeight()
=> 获取的是元素 内容 + padding + border 区域的尺寸　　（内容 + 内边距 + 边框 = outerXXX）


4. outerWidth(true) 和 outerHeight(true)
=> 语法: 元素集合.outerWidth(true) 或者 元素集合.outerHeight(true)
=> 获取的是元素 内容 + padding + border + margin 区域的尺寸　　　(内容 + 内边距 +  边框 + 外边距 = outerXXX ( true ) )

  

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="jqsourse.js"></script>
    <style>
        div{
            width: 100px;   /*内容 宽*/
            height: 100px;  /*内容 高*/
            padding: 20px;  /*内边距*/
            margin: 10px;   /*外边距*/
            border: 5px solid red;  /*边框*/
        }
    </style>
</head>
<body>


<div></div>

<script type="application/javascript">
    /** 上面是语句 下面是结果
     *
     * $('div').height()
     100
     $('div').width()
     100
     $('div').innerWidth()
     140
     $('div').innerHeight()
     140
     $('div').outerWidth()
     150
     $('div').outerHeight()
     150
     $('div').outerHeight(true)
     170
     $('div').outerWidth(true)
     170
     */

</script>
</body>
</html>

 

posted @ 2021-05-25 11:43  咸瑜  阅读(132)  评论(0)  编辑  收藏  举报