原生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 的 prototype问题。
Jan 03 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
js获取提交的字符串的字节数
Feb 09 Javascript
JQuery中使用ajax传输超大数据的解决方法
Jul 14 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
vue 组件内获取actions的response方式
Nov 08 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 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
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
PHP删除目录及目录下所有文件的方法详解
2013/06/06 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
你真的了解JavaScript吗?
2007/02/24 Javascript
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
js读写json文件实例代码
2014/10/21 Javascript
javascript数组输出的两种方式
2015/01/13 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
python根据出生日期返回年龄的方法
2015/03/26 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
python删除不需要的python文件方法
2018/04/24 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
python查看数据类型的方法
2019/10/12 Python
python opencv如何实现图片绘制
2020/01/19 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
如何通过python检查文件是否被占用
2020/12/18 Python
Java编程面试题
2016/04/04 面试题
Final类有什么特点
2012/04/25 面试题
搞笑创意广告语
2014/03/17 职场文书
语文教研活动总结
2014/07/02 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
Pytorch DataLoader shuffle验证方式
2021/06/02 Python
Nginx限流和黑名单配置
2022/05/20 Servers