原生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选中select控件 无法设置selected的解决方法
Sep 01 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
vue-cli监听组件加载完成的方法
Sep 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中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
JavaScript Sort 表格排序
2009/10/31 Javascript
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
js常用代码段整理
2011/11/30 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
详解jQuery中的isPlainObject()使用方法
2018/02/27 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
python实现查询苹果手机维修进度
2015/03/16 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
对python的文件内注释 help注释方法
2018/05/23 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
Python中and和or如何使用
2020/05/28 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
介绍一下linux的文件权限
2014/07/20 面试题
工程类专业自荐信范文
2014/03/09 职场文书
毕业班联欢会主持词
2014/03/27 职场文书
产品质量承诺范本
2014/03/31 职场文书
企业法人授权委托书
2014/09/25 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
2015新学期家长寄语
2015/02/26 职场文书
自荐信模板大全
2015/03/27 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
围城读书笔记
2015/06/26 职场文书
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL