11. jQuery 获取元素尺寸

最新推荐文章于 2025-03-16 11:15:37 发布

咸瑜

最新推荐文章于 2025-03-16 11:15:37 发布

阅读量306

点赞数

文章标签： jquery 前端 javascript ecmascript 开发语言

本文链接：https://blog.youkuaiyun.com/m0_46268961/article/details/125378850

版权

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>