<!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. win7自带windows media player 已停止工作

    解决方法如下: 在计算机开始,菜单找到控制面板 ,然后打开程序和功能,选择打开或关闭window功能,媒体功能.再取消windows Media Center Windows MediaPlayer选 ...

  2. document.write()

    以前一直以为document.write()就一定会清空文档里面的所有内容,一直没有去尝试,最近才知道原来是要在特定的情况下document.write才会清空文档里面所有内容的,在这里,觉得应该告诉 ...

  3. 怎么定义 logger

    随便打开一个 spring 的 源文件,比如  PathMatchingResourcePatternResolver.class 里面是这样定义logger 的 import org.apache. ...

  4. 『TCP/IP详解——卷一：协议』读书笔记——08

    2013-08-21 13:56:23 3.3 IP路由选择 1. IP路由选择有两种情况.(1)如果目的主机与源主机直接相连(如点对点链路)或都在一个共享网络上(以太网或令牌环网),那么IP数据报就 ...

  5. 第44讲：Scala中View Bounds代码实战及其在Spark中的应用源码解析

    今天学习了view bounds的内容,来看下面的代码. //class Pair[T <: Comparable[T]](val first : T,val second : T){//  d ...

  6. 如何处理webView跳转

    - (void)webView:(UIWebView *)wv didFailLoadWithError:(NSError *)error {    // Give iOS a chance to o ...

  7. 使用Process类重定向输出与错误时遇到的问题 (转)

    程序中要调用外部程序cmd.exe执行一些命令行,并取得屏幕输出,使用了Process类,基本代码如下: Process process = new Process(); process.StartI ...

  8. 入门级：怎么使用C#进行套接字编程（二）

    入门级:怎么使用C#进行套接字编程(一) 原文地址如下: C# Server Socket program C# Client Socket program 代码环境:VS2010+Win8.1企业评 ...

  9. 用c#开发微信 (7) 微渠道 - 推广渠道管理系统 2 业务逻辑实现

    我们可以使用微信的“生成带参数二维码接口”和 “用户管理接口”,来实现生成能标识不同推广渠道的二维码,记录分配给不同推广渠道二维码被扫描的信息.这样就可以统计和分析不同推广渠道的推广效果. 上次介绍了 ...

  10. 3.SRS文档

    1.功能需求 本程序的使用者为局域网用户.程序实现的主要功能是局域网的常见格式的文件的传 输.其用例图如图1.本程序可通过可视化操作界面实现一对多的文件传输. 1.1模块分析 为实现局域网文件传输, ...