原生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获取url中的参数且参数为中文时通过js解码
Mar 19 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
Jun 06 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
vue如何集成raphael.js中国地图的方法示例
Aug 15 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
Vue中keep-alive组件作用详解
Feb 04 Javascript
vue 组件简介
Jul 31 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 Javascript
JavaScript高级程序设计之变量与作用域
Nov 17 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
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
PHP持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
修改WordPress中文章编辑器的样式的方法详解
2015/12/15 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
JavaScript 函数replace深入了解
2013/03/14 Javascript
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
javascript常用功能汇总
2015/07/05 Javascript
基于JavaScript操作DOM常用的API小结
2015/12/01 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
Vue组件模板的几种书写形式(3种)
2020/02/19 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
python二分法实现实例
2013/11/21 Python
python实现上传下载文件功能
2020/11/19 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
python 解决函数返回return的问题
2020/12/05 Python
CSS3教程(4):网页边框和网页文字阴影
2009/04/02 HTML / CSS
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
工商技校毕业生自荐信
2013/11/15 职场文书
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
档案工作个人总结
2015/03/03 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers