原生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 三种创建对象的方法
Oct 16 Javascript
关于jquery css的使用介绍
Apr 18 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 Javascript
javascript数据类型验证方法
Dec 31 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 Javascript
记一次用ts+vuecli4重构项目的实现
May 21 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
在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 网页过期时间的控制代码
2009/06/29 PHP
PHP 函数执行效率的小比较
2010/10/17 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
JS简单实现动画弹出层效果
2015/05/05 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
python snownlp情感分析简易demo(分享)
2017/06/04 Python
python实现根据文件格式分类
2019/10/31 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
keras:model.compile损失函数的用法
2020/07/01 Python
python os.rename实例用法详解
2020/12/06 Python
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
涉外文秘个人求职的自我评价
2013/10/07 职场文书
咨询公司各岗位职责
2013/12/02 职场文书
开水果连锁店创业计划书
2013/12/29 职场文书
军训心得体会
2013/12/31 职场文书
物流专员岗位职责
2014/02/17 职场文书
监察建议书范文
2014/03/12 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
创先争优标语
2014/06/27 职场文书
四风自我剖析材料
2014/09/30 职场文书
中秋节晚会开场白
2015/05/29 职场文书
聘任通知书
2015/09/21 职场文书
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android
mysql幻读详解实例以及解决办法
2022/06/16 MySQL