本文主要是介绍jQuery 获取元素尺寸（宽和高），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
在前面几篇文章中，介绍的都是和DOM相关的jQuery方法，本篇文章依旧继续讲和DOM相关的方法。
用jQuery获取一相元素的大小并不难，如下：
$(window).width(); //浏览器的可视宽度
$(document).height(); //页面的高度相信使用过jQuery的小伙伴都会使用这两个方法，那这篇文章还有写的必要吗？(在已发布过的几篇文章中，我并没有去介绍通过类名/id/标记名等方式去获取一个元素，是因为这觉得没必要，有些特殊的选择器我会写在后面的文章中)
请各位看官沉着冷静、聚精会神，请先把手上的砖头放下，看下面的这个例子
<!-- css -->
#div1{width: 100px;height: 100px;padding: 25px;border: #09f solid 15px;
}
<!-- html -->
<div id="div1"></div>
<!-- js -->
$("#div1").height(); //100输出的结果为 100,貌似也没毛病，下面看一下这个元素的CSS盒子模型图
100是这个元素的内容高度，而这个元素在浏览器的实际表现高度是：内容(100)+内补(25*2)+边框(15*2)=180才对，所以不是任何时候使用 $(select).height() 都是对的。那如何获取到值为 180 的高度呢，下面为大家介绍jQuery获取高度的另两个方法
$(select).innerHeight() 方法和 $(select).outerHeight() 方法，不多BB直接上代码：
<!-- js -->
$("#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以上，具体原因，不做解释，就当是个人爱好。
作者：黄河爱浪 QQ：1846492969，邮箱：helang.love@qq.com
微信公众号：
web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。更多精彩文章，请扫下方二维码关注我的公众号
这篇关于jQuery 获取元素尺寸（宽和高）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
