<!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. img图片放大控件 lightbox.js

    1.引入相关js,css jquery-1.7.2.min.js,lightbox.css,lightbox.js   2 图片增加<a href="大图片地址" rel=& ...

  2. 关于MATHAPP的测试

    这是我个人的单元测试博客仅供参考,想了解更全面的信息可请见我们团队的博客http://www.cnblogs.com/xjy-gg/p/5422868.html 首先,从世界那里下载adt-bundl ...

  3. java多条件不定条件查询

    网站或各类管理系统都会用到搜索,会用到一个或多个不确定条件搜索,单条件搜索比较简单,有时候会有多个条件共同查询,如果系统中已经提供了相关的方法供你使用最好,像我做这老系统改版,需要添加搜索,就要自己写 ...

  4. Node.js-提供了四种形式的定时器

    Node.js提供了四种形式的定时器 global.setTimeout(); //一次性定时器 global.setInterval(); //周期性定时器 global.nextTick(); / ...

  5. 【半平面交】bzoj1038 [ZJOI2008]瞭望塔

    http://m.blog.csdn.net/blog/qpswwww/44105605 #include<cstdio> #include<cmath> #include&l ...

  6. Python爬虫（一） 信息系统集成及服务资质网

    警告:不要恶意的访问网站,仅供学习使用! 本教程实例只抓取信息系统集成及服务资质网的企业资质查询. 1. 抓包 打开谷歌浏览器的开发者工具并访问该网站,过滤请求后找到请求数据的包. 1.1 找到相应封 ...

  7. SVM 简要推导过程

    SVM 是一块很大的内容,网上有写得非常精彩的博客.这篇博客目的不是详细阐述每一个理论和细节,而在于在不丢失重要推导步骤的条件下从宏观上把握 SVM 的思路. 1. 问题由来 SVM (支持向量机) ...

  8. [php-composer] how to install composer in windows

    Composer Setup 1. Choose the command-line PHP you want to use.选择使用可以命令行的PHP程序 2. proxy Settings - ch ...

  9. mysql 5.6并行复制事件分发机制

    并行复制相关线程 在MySQL 5.6并行复制中,当设置set global slave_parallel_workers=2时,共有4个复制相关的线程,如下: +----+------------- ...

  10. C#设计模式(19)——状态者模式（State Pattern）

    一.引言 在上一篇文章介绍到可以使用状态者模式和观察者模式来解决中介者模式存在的问题,在本文中将首先通过一个银行账户的例子来解释状态者模式,通过这个例子使大家可以对状态者模式有一个清楚的认识,接着,再 ...