原生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 相关文章推荐
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
javascript 清空form表单中某种元素的值
Dec 26 Javascript
js对图片base64编码字符串进行解码并输出图像示例
Mar 17 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
JS继承用法实例分析
Feb 05 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
浅谈Vue.js 组件中的v-on绑定自定义事件理解
Nov 17 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 Javascript
如何让vue长列表快速加载
Mar 29 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的变量类型和作用域详解
2014/03/12 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
2019/05/05 Javascript
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
Python程序设计入门(3)数组的使用
2014/06/16 Python
python的Template使用指南
2014/09/11 Python
Python下线程之间的共享和释放示例
2015/05/04 Python
浅谈MySQL中的触发器
2015/05/05 Python
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
财务助理岗位职责
2013/11/10 职场文书
大学生怎样进行自我评价
2013/12/07 职场文书
班级入场式解说词
2014/02/01 职场文书
火车来了教学反思
2014/02/11 职场文书
大学生简短的自我评价分享
2014/02/20 职场文书
分家协议书
2014/04/21 职场文书
入党综合考察材料
2014/06/02 职场文书
学校安全防火方案
2014/06/07 职场文书
购房委托书范本
2014/09/18 职场文书
2015年财政所工作总结
2015/04/25 职场文书
化妆品促销活动总结
2015/05/07 职场文书
领导欢送会主持词
2015/07/06 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书