原生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 相关文章推荐
子页向父页传值示例
Nov 27 Javascript
JavaScript制作简易的微信打飞机
Mar 31 Javascript
浅谈关于JavaScript API设计的一些建议和准则
Jun 24 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
JavaScript中0和""比较引发的问题
May 26 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
Vue 项目代理设置的优化
Apr 17 Javascript
javascript获取select值的方法完整实例
Jun 20 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 Javascript
js DOM的事件常见操作实例详解
Dec 16 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
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
php递归列出所有文件和目录的代码
2008/09/10 PHP
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
遭遇php的in_array低性能问题
2013/09/17 PHP
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
php动态生成版权所有信息的方法
2015/03/24 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
Python元组知识点总结
2019/02/18 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
汽车检测与维修专业求职信
2013/10/30 职场文书
国际商务系学生个人的自我评价
2013/11/26 职场文书
2014年度思想工作总结
2014/11/27 职场文书
太空授课观后感
2015/06/17 职场文书
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS