原生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 相关文章推荐
javascript arguments 传递给函数的隐含参数
Aug 21 Javascript
jquery 注意事项与常用语法小结
Jun 07 Javascript
分享一个asp.net pager分页控件
Jan 04 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
jQuery返回定位插件详解
May 15 jQuery
用Vue编写抽象组件的方法
May 06 Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 Javascript
在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
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
让PHP更快的提供文件下载的代码
2012/06/13 PHP
ajax在joomla中的原生态应用代码
2012/07/19 PHP
基于PHP文件操作的详解
2013/06/05 PHP
php中OR与|| AND与&&的区别总结
2013/10/26 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
2013/04/25 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
jQuery的框架介绍
2016/05/11 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
[52:20]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
python 美化输出信息的实例
2018/10/15 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
酒店端午节活动方案
2014/08/26 职场文书
个人先进材料范文
2014/12/30 职场文书
博士给导师的自荐信
2015/03/06 职场文书