<!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. Dell R710、720等系列类服务器 U盘安装centos6.5 操作系统

    一般全新服务器创建系统的时候,没做raid 会报错,如下: 解决: 开机启动时按F10,进入下面界面. 在LC设置-语言和键盘设置选项里可以选择界面显示的语言 在界面主页选项里选择"配置RA ...

  2. SQL基础语法等

    --1.while循环 declare @sum int declare @i int ) begin set @sum =@sum+@i ) print @i end print @sum --2. ...

  3. [2011山东ACM省赛] Sequence （动态规划）

    Sequence Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 Given an integer number sequence ...

  4. 设计模式之美：Adapter（适配器）

    索引 别名 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):简单直接的对象适配器. 实现方式(二):实现双向类适配器. 别名 包装器(Wrapper) 意图 将一个类的接口转换成客户 ...

  5. AlwaysOn--查看可用性组的首先备份节点

    在Alwayson中,可以通过设置来将备份放到指定的节点上完成,微软提供了函数用来判断当前指定节点进行备份: ) SET @database_name= 'DB5' SELECT CASE [mast ...

  6. [安卓] 7、页面跳转和Intent简单用法

    这里有一个layout资源,2个activity.首先在MainActivity.java中实例化按钮和添加按钮监听绑定都是我们知道的,这里要注意的是第22行Intent intent = new I ...

  7. ActiveMQ第四弹:在HermesJMS中创建ActiveMQ Session

    Hermes JMS是一个开源免费的跨平台的JMS消息监听工具.它可以很方便和各种JMS框架集成和交互,可以用来监听.发送.接收.修改.存储消息等.这篇文章将讲解HermesJMS如何集成Active ...

  8. 使用Nito.AsyncEx实现异步锁

    Lock是常用的同步锁,但是我们无法在Lock的内部实现异步调用,比如我们无法使用await. 以下面的代码为例,当你在lock内部使用await时,VS会报错提醒. 最简单的解决办法就是使用第三方的 ...

  9. js语法

    需要<script language="javascript">标签: ||或者:二选一,满足为true.,否则为false &&与:同时满足,即为tr ...

  10. atitit.web 推送实现方案集合

    atitit.web 推送实现方案集合 1. 俩中模式 Push/Pull 1 2. 需要实现的特性 2 2.1. 推送消息广播. 2 2.2. 推送定向消息. 2 2.3. 提供连接上线前.上线.下 ...