jQuery 获取元素尺寸（宽和高）

╰+攻爆jí腚メ 2022-05-14 13:23 367阅读 0赞

在前面几篇文章中，介绍的都是和DOM相关的jQuery方法，本篇文章依旧继续讲和DOM相关的方法。

用jQuery获取一相元素的大小并不难，如下：

$(window).width();     //浏览器的可视宽度
    $(document).height();  //页面的高度

相信使用过jQuery的小伙伴都会使用这两个方法，那这篇文章还有写的必要吗？(在已发布过的几篇文章中，我并没有去介绍通过类名/id/标记名等方式去获取一个元素，是因为这觉得没必要，有些特殊的选择器我会写在后面的文章中)

请各位看官沉着冷静、聚精会神，请先把手上的砖头放下，看下面的这个例子

#div1{
        width: 100px;
        height: 100px;
        padding: 25px;
        border: #09f solid 15px;
    }
    
    <div id="div1"></div>
    
    $("#div1").height();   //100

输出的结果为 100,貌似也没毛病，下面看一下这个元素的CSS盒子模型图

![70][]

100是这个元素的内容高度，而这个元素在浏览器的实际表现高度是：内容(100)+内补(25\*2)+边框(15\*2)=180才对，所以不是任何时候使用 $(select).height() 都是对的。那如何获取到值为 180 的高度呢，下面为大家介绍jQuery获取高度的另两个方法

**$(select).innerHeight() **方法和 **$(select).outerHeight()** 方法，不多BB直接上代码：

$("#div1").innerHeight();   //150
    $("#div1").outerHeight();   //180

从上面的代码中，大家已经很清楚这两个方法的功能和作用了吧。

这里介绍的是获取高度的问题，那么获取宽度的方法和功能是一样的，就不一一赘述了。

使用过jQuery.js，相信您对 zepto.js 并不陌生。二者在使用上貌似基本无异，zepto.js的 $(select).height()方法 和 $(select).outerHeight()方法在获取结果上是一致的。这么一说的话根本不用想这么多，直接用 zepto.js 岂不是更好，还用什么jQuery.js 这不是在自找麻烦吗？其实这就是这两者非常明显的差距了，一个好的框架会提供更全面的接口，而不是仅仅的提供最常用的方法，反正我是从来不用zepto.js的，因为我非常注重HTML结构，能少写一个标记就少写一个标记，使用zepto.js在某些情况下只能通过布局来弥补框架的不足。

已经到了文章的尾声，我并没有给出【获取元素尺寸】到底使用那一种方法的结论，因为方法的存在就有它的道理，具体使用那一种方法，还是要根据元素CSS盒子模型来决定，如果您不想因布局修改而带来问题，相信您也已经知道该使用那一个方法，顺便透露一下本人在使用jQuery.js时的版本选择问题，PC端：1.9 ， 移动端：3.0或者3.0以上，具体原因，不做解释，就当是个人爱好。

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[70]: /images/20220514/8e08a4974a5c466faae737dc22b59d7c.png
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220514/1ab355d3dcfa4eed8224b05468f6bf52.png