原生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 比较时间大小的代码
Apr 24 Javascript
JavaScript中的onerror事件概述及使用
Apr 01 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
微信小程序收藏功能的实现代码
Jun 12 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 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
ip签名探针
2006/10/09 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
php多文件上传下载示例分享
2014/02/20 PHP
将php数组输出html表格的方法
2014/02/24 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
修改发贴的编辑功能
2007/03/07 Javascript
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
js实现异步循环实现代码
2016/02/16 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
实时监控input框,实现输入框与下拉框联动的实例
2018/01/23 Javascript
jQuery中可见性过滤器简单用法示例
2018/03/31 jQuery
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
Python中的测试模块unittest和doctest的使用教程
2015/04/14 Python
Python语言描述随机梯度下降法
2018/01/04 Python
详解python做UI界面的方法
2019/02/27 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
使用python远程操作linux过程解析
2019/12/04 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
服务标语口号
2014/07/01 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书
vue实现可拖拽的dialog弹框
2021/05/13 Vue.js
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle