<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式</title>

<script type="text/javascript" src="jquery.min.js"></script>

</head>

<body style="border:1px solid #ccc">

        <div id="div" style="width:100px;height:80px;left:10px;top:8px;position:relative;border:1px solid #ccc;margin:20px 10px;padding:7px 6px;">

        </div>

    <script type="text/javascript">

        var divObj = document.getElementById("div");

        var dOffsetWidth = divObj.offsetWidth;//返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）

        var $dOffsetWidth = $(divObj).outerWidth(false);//参数为true，包括外边距

        var dOffsetHeight = divObj.offsetHeight;//返回元素的高度（包括元素高度、内边距和边框，不包括外边距）

        var $dOffsetHeight = $(divObj).outerHeight(false);//参数为true，包括外边距

        var dClientWidth = divObj.clientWidth;//返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）

        var $dClientWidth = $(divObj).innerWidth();

        var dClientHeight = divObj.clientHeight;//返回元素的高度（包括元素高度、内边距，不包括边框和外边距）

        var $dClientHeight = $(divObj).innerHeight();

        var dWidth = divObj.style.width;//返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）

        var $dWidth = $(divObj).width();//width(val)设置宽

        var dHeight = divObj.style.height;//返回元素的高度（包括元素高度，不包括内边距、边框和外边距）

        var $dHeight = $(divObj).height();//height(val)设置高

        var dscrollWidth = divObj.scrollWidth;//返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同

        var dscrollHeight = divObj.scrollHeight;//返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同

        console.log("dOffsetWidth:"+dOffsetWidth+",dOffsetHeight:"+dOffsetHeight+",dClientWidth:"+dClientWidth+",dClientHeight:"+dClientHeight+",dWidth:"+dWidth+",dHeight:"+dHeight+",dscrollWidth:"+dscrollWidth+",dscrollHeight:"+dscrollHeight);

        console.log("$dOffsetWidth:"+$dOffsetWidth+",$dOffsetHeight:"+$dOffsetHeight+",$dClientWidth:"+$dClientWidth+",$dClientHeight:"+$dClientHeight+",$dWidth:"+$dWidth+",$dHeight:"+$dHeight);

        /*

            注意：offsetWidth(offsetHeight)与style.width(style.height)的区别

            1. style.height 返回的是字符串，如28px，offsetWidth返回的是数值28，如果需要对取得的值进行计算，用offsetWidth比较方便;如果拿到offsetWidth设置style.left的值，需加'px'。

            2. style.width/style.height与scrollWidth/scrollHeight是可读写的属性，clientWidth/clientHeight与offsetWidth/offsetHeight是只读属性

            3. style.height的值需要事先定义，否则取到的值为空。而且必须要定义在html里，如果定义在css里，style.height的值仍然为空，但元素偏移有效；而offsetWidth则仍能取到。

        */

        /*

            总结：

            1、通过style.width(style.height)或者jQuery的$(divObj).width()/$(divObj).height()获取/设置元素的宽高

            2、若要获取元素包含边框的宽度，则可通过divObj.offsetWidth/divObj.offsetHeight或jQuery的$(divObj).outerWidth(false)/$(divObj).outerHeight(false)获取

            3、通过$(divObj).outerWidth(true)/$(divObj).outerHeight(true)获取带外边距的宽度

            4、通过$(divObj).innerWidth()/$(divObj).innerHeight()获取不包含边框、不包含外边距的宽度

        */

    </script>

</body>

</html>

技术交流QQ群：15129679

offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式的更多相关文章

  1. js 和 jquery 获取页面和滚动条的高度 视口高度文档高度

    js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...

  2. js与jquery获取父元素,删除子元素的不同方法

    var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...

  3. JS和Jquery获取和修改label的值的示例代码

    abel标签在JS和Jquery中使用不能像其他标签一样用value获取它的值,下面有个不错的示例,希望大家可以学习下 来源:  <  JS和Jquery获取和修改label的值的示例代码  & ...

  4. scrollWidth、clientWidth、offsetWidth、width的区别

    scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. off ...

  5. scrollWidth,offsetWidth,clientWidth,width;scrollHeight,offsetHeight,clientHeight,height;offsetTop,scrollTop,top;offsetLeft,scrollLeft,left还有谁

    题中的那么多属性让人头都大了,他们到底是什么意思?不同浏览器的实现是一样的吗?以下所有结论来自chrome版本 53.0.2785.89 (64-bit)和firefox版本52.0.2,操作系统ub ...

  6. js和jquery获取属性的区别

    一.获取元素: js获取元素: 根据id获取:document.getElementById("id"); 根据类名获取:document.getElementsByClassNa ...

  7. js、jQuery 获取文档、窗口、元素的各种值

    基于两年开发经验,总结了 javascript.jQuery 获取窗口.文档.元素的各种值 javascript: 文档:是整个document所有的内容 浏览器当前窗口文档body的宽度: docu ...

  8. [转]js和jquery获取窗体高度

    JQuery获取浏览器窗口宽高,文档宽高 2010-01-20 08:59<script type="text/javascript">$(document).read ...

  9. js和jquery获取当前对象的子元素

    开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法. HTML片断: <ul class="box"> <li>子元素1</l ...

随机推荐

  1. StringGrid 实例4 本例功能: 1、给每个单元格赋值 2、调整当前单元格位置：上下左右；

    实例4 本例功能:1.给每个单元格赋值 2.调整当前单元格位置:上下左右: 运行效果图:

  2. java堆内存与栈内存

    java的内存分为两种,堆内存与栈内存: 堆内存用来存放数组和new的对象,比如一个文件,字节流是存放在堆中,栈内存为这个文件开辟一个索引,也就是这个文件的地址,并且保存在栈中.对象由GC处理释放内存 ...

  3. Intellij IDEA 根据数据库自动生成pojo和hbm

    新建一个项目,每次写hibernate部分,就觉得pojo和hbm.xml部分很蛋疼.今天搜索了半天,终于知道如何根据数据库自动生成了. Intellij IDEA14创建maven时并不能勾选各种支 ...

  4. wsdl地址如何在远程服务器上查看源码？

    工作需要,接了几个webservice接口,但是厂家给的规范十分不规范,服务名称没一个写对的,要是我的本地电脑可以打开wsdl地址,那倒没什么,察看一下wsdl就可以. 但是好多wsdl地址我本地电脑 ...

  5. MongoDB 3.2 在windows上的安装

    翻译自 https://docs.mongodb.org/master/tutorial/install-mongodb-on-windows/ 在windows上安装 MongoDB 平台支持:从M ...

  6. [SmartFoxServer概述]SFS2X协议

    SFS2X 客户端-服务器协议 SFS2X使用了一种高效的二进制协议,这种协议可以使服务器在各方面都表现出色.消息通过客户端和服务器引擎得到快速转换,在带宽上传输可更加轻便.附加的即时压缩,能够在不影 ...

  7. SkipList算法实现

    SkipList是一种快速查找链表,链表元素的是有序的.由W.Pugh发明于1989年.其算法复杂度如下: Average Worst caseSpace O(n) O(n log n)Search ...

  8. 对angular实现延迟加载template和controller

    1.在lib目录中添加 script.js 文件,并在index.html其他<script>之前引用之: <script src="lib/script.js" ...

  9. SQL到NOSQL的思维转变

    NOSQL系统一般都会宣传一个特性,那就是性能好,然后为什么呢?关系型数据库发展了这么多年,各种优化工作已经做得很深了,NOSQL系统一般都是吸收关系型数据库的技术,然后,到底是什么因素束缚了关系型数 ...

  10. Dynamic CRM 2013学习笔记（二）插件基本用法及调试

      插件是可与 Microsoft Dynamics CRM 2013 和 Microsoft Dynamics CRM Online 集成的自定义业务逻辑(代码),用于修改或增加平台的标准行为.也可 ...