原生js获取宽高与jquery获取宽高的方法关系对比


Posted in Javascript onApril 04, 2014

说明:1、因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况。

 2、以下所说的所有方法与属性所返回的值都是不带单位的。

 3、为了方便说明,以下情况采用缩写表示:

obj -> 在原生JS中表示DOM对象;在JQuery中表示JQuery对象

Width -> obj.style.width

OffsetWidth -> obj.offsetWidth

$width -> obj.width()

$innerWidth -> obj.innerWidth()

$outerWidth -> obj.outerWidth()

padding -> 表示对象的padding-left和padding-right之和

border -> 表示对象的border-left-width和border-right-width之和

原生JS获取宽度的相关属性有 width和offsetWidth。width的获取方法是obj.style.width,只有当对象是通过内嵌方式设定宽度时才能获得,否则返回的是一个空字符串。offsetWidth获得的值跟JQuery中获得对象的outerWidth一样,offsetWidth是非标准的但却得到很好支持的属性。

JQuery获得宽度的方法有width()、innerWidth()、outerWidth()这三种方法。具体使用方式是:obj.width()、obj.innerWidth()、obj.outerWidth()。width()获得的是对象的内容宽度,innerWidth()获得的是对象的内容宽度与填充宽度的和,outerWidth()获得的是包括边框、填充宽度与内容宽度在内的宽度。

这五种方法之间的关系如下:

width = $width;
offsetWidth = border + padding +width;
$innerWidth = padding + width;
$outerWidth = border + padding +width;

这五种方法对firefox、chrome、opera、safari、ie6、ie7、ie8、ie9都兼容,只是存在着两种问题:1、width在没有设定的情况下,chrome在第一次打开页面时,所获取到的宽度全部都是错误的。第二次打开时,结果就跟firefox一致。2、ie6未设定宽高的情况下,不会出现滚动条。

Javascript 相关文章推荐
js实现的网站首页随机公告随机公告
Mar 14 Javascript
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
jQuery插件 selectToSelect使用方法
Oct 02 Javascript
Javascript基础教程之比较操作符
Jan 18 Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 Javascript
vue中 v-for循环的用法详解
Feb 19 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 #Javascript
javascript中的循环语句for语句深入理解
Apr 04 #Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 #Javascript
调试代码导致IE出错的避免方法
Apr 04 #Javascript
javascript写的一个模拟阅读小说的程序
Apr 04 #Javascript
js 显示base64编码的二进制流网页图片
Apr 04 #Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 #Javascript
You might like
mysql 性能的检查和优化方法
2009/06/21 PHP
php实现的css文件背景图片下载器代码
2014/11/11 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
jquery的键盘事件修改代码
2011/02/24 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
构建Vue大型应用的10个最佳实践(小结)
2019/11/07 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
Python实现的一个简单LRU cache
2014/09/26 Python
Python获取文件ssdeep值的方法
2014/10/05 Python
python的构建工具setup.py的方法使用示例
2017/10/23 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
python 工具 字符串转numpy浮点数组的实现
2020/03/14 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
保安部任务及岗位职责
2014/02/25 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
求职信怎么写范文
2014/05/26 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书