原生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 onkeydown,onkeyup,onkeypress,onclick,ondblclick
Feb 04 Javascript
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
Vue-router 中hash模式和history模式的区别
Jul 24 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
Vue中使用canvas方法总结
Feb 12 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
javascript canvas实现简易时钟例子
Sep 05 Javascript
Array.filter中如何正确使用Async
Nov 04 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
福利彩票幸运号码自动生成器
2006/10/09 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
php文件操作相关类实例
2015/06/18 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
JavaScript中return false的用法
2015/03/12 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
python连接MySQL数据库实例分析
2015/05/12 Python
详解Python中的Descriptor描述符类
2016/06/14 Python
Python读写zip压缩文件的方法
2018/08/29 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
Python对象与引用的介绍
2019/01/24 Python
python学生信息管理系统实现代码
2019/12/17 Python
python实现拼接图片
2020/03/23 Python
商业项目策划方案
2014/06/05 职场文书
竞聘自述材料
2014/08/25 职场文书
解除劳动合同协议书
2014/09/17 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
地方白酒代理协议书
2014/10/25 职场文书
2014年化验室工作总结
2014/11/21 职场文书
环境建议书
2015/02/04 职场文书
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python
Go中的条件语句Switch示例详解
2021/08/23 Golang