原生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兼容标准的表格变色效果
Jun 28 Javascript
JavaScript 闭包深入理解(closure)
May 27 Javascript
使用隐藏的new来创建对象
Mar 29 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
javascript中解析四则运算表达式的算法和示例
Aug 11 Javascript
使用 jQuery 实现表单验证功能
Jul 05 jQuery
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 Javascript
vue实现登录拦截
Jun 29 Javascript
如何用JS模拟实现数组的map方法
Jul 30 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
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
JS 实现图片直接下载示例代码
2013/07/22 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
python使用pil生成图片验证码的方法
2015/05/08 Python
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
浅谈盘点5种基于Python生成的个性化语音方法
2021/02/05 Python
CSS3 分类菜单效果
2019/05/27 HTML / CSS
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
大学校务公开实施方案
2014/03/31 职场文书
和解协议书
2014/04/16 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
部门活动策划方案
2014/08/16 职场文书
2015中学教学工作总结
2015/07/22 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android