原生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中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
在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实现用于计算执行时间的类实例
2015/04/18 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
小程序Request的另类用法详解
2019/08/09 Javascript
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
Python GUI布局尺寸适配方法
2018/10/11 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
Python数据可视化:泊松分布详解
2019/12/07 Python
python的slice notation的特殊用法详解
2019/12/27 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
python 自动识别并连接串口的实现
2021/01/19 Python
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
PHP经典面试题
2016/09/03 面试题
信用卡工作证明模板
2014/09/14 职场文书
2014年消防工作总结
2014/11/21 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
Java 数组内置函数toArray详解
2021/06/28 Java/Android
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python