说明: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. 跟厂长学PHP7内核(三):源码目录结构

    上篇文章我们已经介绍了源码分析工具的安装.配置以及调试方法,本文我们来讲述一下PHP源码的目录结构. 一.目录概览 以php-7.0.12为例,看过源码的同学们应该发现源码目录多达十多个,下面是每个目 ...

  2. iOS 9应用开发教程之ios9中实现按钮的响应

    iOS 9应用开发教程之ios9中实现按钮的响应 IOS9实现按钮的响应 按钮主要是实现用户交互的,即实现响应.按钮实现响应的方式可以根据添加按钮的不同分为两种:一种是编辑界面添加按钮实现的响应:另一 ...

  3. 【Performance】chrome调试面板

    本篇文章以chrome版本67.0.3396.99为例,说明性能方面的调试.

  4. [BZOJ5305][HAOI2018]苹果树(DP)

    首先注意到每种树都是等概率出现的,于是将问题转化成计数求和问题. f[n]表示所有n个点的树的两两点距离和的总和. g[n]表示所有n个点的树的所有点到根的距离和的总和. h[n]表示n个点的树的可能 ...

  5. 【SPFA】POJ1860-Currency Exchange

    [题目大意] 给出每两种货币之间交换的手续费和汇率,求出从当前货币s开始交换,能否赚. [思路] 反向运用SPFA,判断是否有正环.每次队首元素出队之后,判断一下到源点s的距离是否增大,增大则返回tr ...

  6. hdu 1429 bfs+状压

    题意:这次魔王汲取了上次的教训,把Ignatius关在一个n*m的地牢里,并在地牢的某些地方安装了带锁的门,钥匙藏在地牢另外的某些地方.刚开始 Ignatius被关在(sx,sy)的位置,离开地牢的门 ...

  7. Windows下ftp服务器搭建及配置

    Win系统使用ser-u软件进行FTP服务器的搭建下载地址:https://www.serv-u.com/操作步骤如下:1. 点击执行程序进行按照SU-FTP-Server-Windows-v15.1 ...

  8. Oracle连接步骤

    JDBC实现数据所有的操作: 数据库连接需要的步骤 1.数据库的驱动程序:oracle.jdbc.driver.OracleDriver; 2.连接地址:jdbc:oracle:thin:@主机地址: ...

  9. SQL(insert、delete、update)执行成功,但是数据库表中无显示无记录

    如题,程序中insert一条记录,调试过程中根据执行结果发现此条sql已经执行成功(影响行数为1且插入记录已生成自增主键正确值),但是查询数据库相应表时发现表中并无相应记录,通过直接在表中插入测试数据 ...

  10. Apache参数的优化(转)

    按照前面提到的版本问题,Apache可以直接使用2.0版本产品线.针对Apache的优化主要是针对httpd.conf的优化,当然还有其他地方,如果特别留意的话,网上常有专家惊呼“居然这么多人忽略xx ...