js 和 jquery 里面几个获取宽高的调查
2016-09-14 16:13
197 查看
罗列下 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.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() ); };
相关文章推荐
- 原生js获取宽高与jquery获取宽高的方法关系对比
- js及jquery获取页面和元素的宽高
- 原生js获取宽高与jquery获取宽高的方法的关系
- 原生js获取宽高与jquery获取宽高的方法关系对比
- js&jquery获取指定table指定行里面的内容
- jquery获取各种宽高、js的获取各种宽高及屏幕高度详解
- JS,Jquery获取select,dropdownlist,checkbox 下拉列表框的值
- JS/JQuery 获取多个同名的文本进行操作
- js获取对象宽高位移总汇
- js里面如何获取网络地址的图片的高度和宽度 (变通办法)
- js RuntimeObject() 获取ie里面自定义函数或者属性的集合
- js 获取鼠标的位置(兼容火狐与ie)用了jquery 进行简化操作,但获取鼠标的是纯js,加上<!DOCTYPE 标准
- JS获取网页宽高方法集合
- js获取屏幕高度和宽度的几个方法
- (ckeditor+ckfinder用法)Jquery,js获取ckeditor值 .
- JQuery获取浏览器窗口宽高,文档宽高
- JS如何获取A标签里面的链接属性
- 几个优秀的js框架的license问题,付费,版权,侵权(extj,jquery,YUI,coolite)
- 读取xml实现问卷调查,关于问卷调查的内容全部放在了xml里面,使用了jQuery
- 用js获取.aspx页面里面的服务器控件和.ascx中的服务器控件值