原生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 相关文章推荐
基于JQuery的一个简单的鼠标跟随提示效果
Sep 23 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 Javascript
关于AOP在JS中的实现与应用详解
May 06 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 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
PHP中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
2019/10/14 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
Python入门之后再看点什么好?
2018/03/05 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
Django 自动生成api接口文档教程
2019/11/19 Python
python实现图片二值化及灰度处理方式
2019/12/07 Python
python如何把字符串类型list转换成list
2020/02/18 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
Ruby如何定义一个类
2012/10/08 面试题
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
三人合伙协议书范本
2014/10/29 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
Win11任务栏太宽了怎么办?一招解决Win11任务栏太宽问题
2021/11/21 数码科技
redis数据结构之压缩列表
2022/03/21 Redis
MySQL实现配置主从复制项目实践
2022/03/31 MySQL
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis