原生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实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
JS判断字符串包含的方法
May 05 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
javascript表达式和运算符详解
Feb 07 Javascript
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
JavaScript函数绑定用法实例分析
Nov 14 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
详解新手使用vue-router传参时注意事项
Jun 06 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
人族 Terran 魔法与科技
2020/03/14 星际争霸
PHP游戏编程25个脚本代码
2011/02/08 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
php入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
PHP时间函数使用详解
2019/03/21 PHP
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
清除输入框内的空格
2016/12/21 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
python 第三方库的安装及pip的使用详解
2017/05/11 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
大专毕业生简历的自我评价
2013/10/20 职场文书
校园报刊亭的创业计划书
2014/01/02 职场文书
应届护士求职信范文
2014/01/26 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
2015年会计工作总结范文
2015/05/26 职场文书