原生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 17 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
JS中表单的使用小结
Jan 11 Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
使用canvas及js简单生成验证码方法
Apr 02 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
Nuxt项目支持eslint+pritter+typescript的实现
May 20 Javascript
Vue CLI3中使用compass normalize的方法
May 30 Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 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读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
javascript new fun的执行过程
2010/08/05 Javascript
用js实现in_array的方法
2013/11/05 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
jquery选择器中的空格与大于号>、加号+与波浪号~的区别介绍
2016/06/24 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
2018/02/08 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
python原始套接字编程示例分享
2014/02/21 Python
python 异常处理总结
2016/10/18 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
Python 一句话生成字母表的方法
2019/01/02 Python
Python魔法方法详解
2019/02/13 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
Python-opencv 双线性插值实例
2020/01/17 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
毕业生文员求职信
2013/11/03 职场文书
质量标语大全
2014/06/12 职场文书
审计班子对照检查材料
2014/08/27 职场文书
经理聘任证明
2015/03/02 职场文书
刑事案件上诉状
2015/05/23 职场文书
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫