js 和 jquery 里面几个获取宽高的调查

罗列下 js 和 jquery 里面获取宽高的方法：

obj.offsetWidth = $obj.outerWidth()  // offsetWidth

obj.clientWidth = obj.scrollWidth　　 // offsetWidth - border - scrollbar

$obj.innerWidth()                            // offsetWidth - border

$obj.width()                                   // offsetWidth - border - padding

基本是这样（当然测试的过程复杂得多，移动端 scrollbar 为 0，是加法还是减法，还考虑 inline 形态等）...

css 是这样的 width:100px; padding: 15px; border: 5px solid; overflow:auto;

 

获取高度同理，此处不赘述...

可见 jquery 的 width() 方法和 js 的 clientWidth 还是有区别的，

可以认为当有滚动条时，子级的宽度会和 scrollbar 有关，而不是单纯的 offsetWidth - border - padding

而且 border-box 状态下这一切又不一样了...（JQuery 忽略了盒模式，Zepto 倒是由 box-sizing 决定）

 

另外，inline-block 形态与 block 一致

而 inline 状态时，clientWidth 和 scrollWidth 是为 0 的，但 width() 依然可用

 

再写点不错引用：

// 判断子级是否超出了父级范围
obj.scrollHeight > obj.clientHeight || obj.offsetHeight > obj.clientHeight; 

　　

// 判断是否在屏幕中显示
$.fn.isInView = function(options) {
　　var $this = $(this);

　　if (!$this.visible()) return false;

　　var windowLeft = $win.scrollLeft(), windowTop = $win.scrollTop();
　　var offset = $this.offset();
　　var left = offset.left, top = offset.top;

　　options = $.extend({
　　　　topOffset: 0, leftOffset: 0
　　}, options);

　　return (
　　　　top + $this.height() >= windowTop &&
　　　　top - options.topOffset <= windowTop + $win.height() &&
　　　　left + $this.width() >= windowLeft &&
　　　　left - options.leftOffset <= windowLeft + $win.width()
　　);
};