原生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效率调优经验
Jun 04 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
Vue 使用中的小技巧
Apr 26 Javascript
vue router 跳转后回到顶部的实例
Aug 31 Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 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
建立动态的WML站点(三)
2006/10/09 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
JS+CSS实现简易实用的滑动门菜单效果
2015/09/18 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
javascript实现考勤日历功能
2018/11/29 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
vue仿ios列表左划删除
2019/09/26 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
Python自动化开发学习之三级菜单制作
2017/07/14 Python
Python中django学习心得
2017/12/06 Python
python操作mysql代码总结
2018/06/01 Python
学习python需要有编程基础吗
2020/06/02 Python
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
化工专业应届生求职信
2013/11/08 职场文书
夜大毕业生自我评价分享
2013/11/10 职场文书
2014升学宴答谢词
2014/01/26 职场文书
中学生差生评语
2014/01/30 职场文书
九年级数学教学反思
2014/02/02 职场文书
企业职业病防治方案
2014/05/29 职场文书
论文致谢词范文
2015/05/14 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android