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

本文主要是介绍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以上，具体原因，不做解释，就当是个人爱好。