说明: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未设定宽高的情况下,不会出现滚动条。

原生js获取宽高与jquery获取宽高的方法的关系的更多相关文章

  1. JavaScript DOM查询,原生js实现元素子节点的获取

    在网页网页开发中,经常会需要获取某个网页元素的子元素,然后对其进行事件绑定.或样式修改等行为.这些操作对于jquery来说很容易,但是对于原生js会稍微麻烦一些,这里将介绍四种方法获取元素的子元素(本 ...

  2. 原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

    一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...

  3. 原生js封装table表格操作,获取任意行列td,任意单行单列方法

    V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...

  4. 原生JS操作 table object HTMLTableSectionElement 对象,获取行数

    <tbody id="infoTab"> <tr class="fomat"> <td class="blank&quo ...

  5. 原生js在绑定事件时不用获取id名可直接用id名绑定???

    <div id="btn"> 点击 </div> <script> btn.onclick=function(){ console.log(bt ...

  6. jquery获取浏览器各种高宽

    $(document).ready(function(){ alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()) ...

  7. 放弃jQuery,使用原生js吧!

    转自:http://itakeo.com/blog/2015/07/28/nojq/ 随着IE6.7.8的逐渐淘汰,HTML5的兴起,以及侧重点放在了移动端,jQuery可能变的不在那么重要,原生一样 ...

  8. [开发笔记]-使用jquery获取url及url参数的方法

    使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作 1.jquery获取url很简单,代码如下: window.location.href; 其实只是用到了javasc ...

  9. 使用jquery获取url及url参数的方法

    使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作 1.jquery获取url很简单,代码如下: window.location.href; 其实只是用到了javasc ...

随机推荐

  1. 七、django rest_framework源码之视图

    1 绪言 当大家看大这篇博文的时候,应该对Django rest_framework中的CBV有所了解了,大致来说就是通过定义类来继承APIView类,并在类中定义get.post.put.delet ...

  2. javascript中switch的用法注意

    switch中文翻译过来是转换.切换的意思.用在js中,各个条件转换而执行不同代码.

  3. 你的跑步姿势正确吗? 教你正确跑步姿势 & 常识

    转载!!!!!搞IT必须运动一下 前言: 最近两年跑步的人越来越多,跑步在大部分人的观念中都是毫无技术含量,只要迈开腿就行了,其实这也是造成大多数跑步人士伤病的根源.对跑步的认知不足,跑步是一项看起来 ...

  4. anaconda安装tensorflow后pip安装jieba出错的问题

    安装jieba出错,参考https://www.cnblogs.com/minsons/p/7872647.html TypeError: parse() got an unexpected keyw ...

  5. Web2.0应用程序的7条原则

    个人看好Web的发展潜力,本文字摘自<Collective Intelligence 实战> 网络是平台 使用传统许可模式软件的公司或用户必须运行软件.定期更新至最新版本,以及扩展它来满足 ...

  6. ShellExecuteA函数

    原型: ShellExecuteA(, , , );//最大化打开记事本 第一个参数//系统启动第二个参数//open打开第三个参数//指令第四个参数//默认0第五个参数//默认0第六个参数//0隐藏 ...

  7. 鸟哥的私房菜:Bash shell(五)-数据流重导向

    数据流重定向 数据流重导向就是将某个指令执行后应该要出现在屏幕上的数据, 给他传输到其它的地方,例如档案或者是装置 (例如打印机之类的!)!这玩意儿在 Linux 的文字模式底下可重要的! 尤其是如果 ...

  8. 保存全局Crash报告

    CrashHandler.java UncaughtException处理类,当程序发生Uncaught异常的时候,有该类来接管程序,并记录发送错误报告 package  com.amanda;imp ...

  9. Vuex了解

    State Vuex是用来管理某个应用的整个状态,那么一个应用只能有一个Vuex实例.和React一样,Vuex也不允许直接去修改state,而是通过提交mutation,来触发状态变更.Vuex的状 ...

  10. 简单的php自定义错误日志

    平时经常看php的错误日志,很少有机会去自己动手写日志,看了王健的<最佳日志实践>觉得写一个清晰明了,结构分明的日志还是非常有必要的. 在写日志前,我们问问自己:为什么我们有时要记录自定义 ...