JavaScript中clientWidth,offsetWidth,scrollWidth的区别

一、概念

　　它们都是Element的属性，表示元素的宽度：

Element.clientWidth    内容+内边距-滚动条-----不包括边框和外边距  == 可视内容
Element.scrollWidth    内容+内边距+溢出尺寸-----不包括边框和外边距  ==实际内容
Element.offsetWidth   元素的宽度（内容+内边距+边框+滚动条）==整体，整个控件

二、举例

1、仅有横向滚动条的情况

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>测试scrollWidth、clientWidth、offsetWidth</title>
 <style type="text/css">
  body, html {
   margin: 0px;
   padding: 0px;
  }

  #father {
   width: 300px;
   overflow: auto;
   padding: 10px;
   background: rebeccapurple;
   border: 10px solid red;
   margin: 20px;
  }

  #child {
   height: 100px;
   width: 1000px;
   padding: 10px;
   border: 20px solid #ffcc99;
   margin: 30px;
  }
 </style>
</head>
<body>

<div id="father">
 <div id="child"></div>
</div>

<script type="text/javascript">
 var child = document.getElementById("child");
 console.log("child.width:", window.getComputedStyle(child).width); //内容的宽度：1000px
 console.log("child.clientWidth:", child.clientWidth); //内容+内边距-滚动条-----不包括边框和外边距 == 可视内容 1020px
 console.log("child.scrollWidth:", child.scrollWidth); //内容+内边距+溢出尺寸-----不包括边框和外边距 ==实际内容 1020px
 console.log("child.offsetWidth:", child.offsetWidth); //元素的宽度（内容+内边距+边框+滚动条）==整体，整个控件  1060px

 var father = document.getElementById("father");
 console.log("father.width:", window.getComputedStyle(father).width); //内容的宽度：300px
 console.log("father.clientWidth:", father.clientWidth); //内容+内边距-滚动条-----不包括边框和外边距 == 可视内容 320px
 console.log("father.scrollWidth:", father.scrollWidth); //内容+内边距+溢出尺寸-----不包括边框和外边距 ==实际内容 1100px
 console.log("father.offsetWidth:", father.offsetWidth); //元素的宽度（内容+内边距+边框+滚动条）==整体，整个控件  340px
</script>
</body>
</html>

　　仅有横向滚动条的情况时，父元素收受到子元素宽度的影响，其他比较特别的是scrollWidth。

　　父元素的scrollWidth是：子元素的content+padding+border+子元素一边的margin+父元素一边的padding。

2、有横向滚动条和竖向滚动条的情况

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>测试scrollWidth、clientWidth、offsetWidth</title>
 <style type="text/css">
  body, html {
   margin: 0px;
   padding: 0px;
  }

  #father {
   height: 50px;
   width: 300px;
   overflow: auto;
   padding: 10px;
   background: rebeccapurple;
   border: 10px solid red;
   margin: 20px;
  }

  #child {
   height: 100px;
   width: 1000px;
   padding: 10px;
   border: 20px solid #ffcc99;
   margin: 30px;
  }
 </style>
</head>
<body>

<div id="father">
 <div id="child"></div>
</div>

<script type="text/javascript">
 var child = document.getElementById("child");
 console.log("child.width:", window.getComputedStyle(child).width); //内容的宽度：1000px
 console.log("child.clientWidth:", child.clientWidth); //内容+内边距-滚动条-----不包括边框和外边距 == 可视内容 1020px
 console.log("child.scrollWidth:", child.scrollWidth); //内容+内边距+溢出尺寸-----不包括边框和外边距 ==实际内容 1020px
 console.log("child.offsetWidth:", child.offsetWidth); //元素的宽度（内容+内边距+边框+滚动条）==整体，整个控件  1060px

 var father = document.getElementById("father");
 console.log("father.width:", window.getComputedStyle(father).width); //内容的宽度：285px
 console.log("father.clientWidth:", father.clientWidth); //内容+内边距-滚动条-----不包括边框和外边距 == 可视内容 305px
 console.log("father.scrollWidth:", father.scrollWidth); //内容+内边距+溢出尺寸-----不包括边框和外边距 ==实际内容 1100px
 console.log("father.offsetWidth:", father.offsetWidth); //元素的宽度（内容+内边距+边框+滚动条）==整体，整个控件  340px
</script>
</body>
</html>

　　父元素的width为：父元素的content宽度-滚动条的宽度（大约为15px）

　　父元素的clientWidth为：父元素的content宽度+父元素padding宽度-滚动条宽度（大约为15px）

以上就是Element中clientWidth,offsetWidth,scrollWidth的区别的详细内容，更多关于clientWidth,offsetWidth,scrollWidth的区别的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 与ClientWidth有关的一点资料

    51windows.Net var s = ""; s += " 网页可见区域宽:"+ document.body.clientWidth; s += "网页可见区域高:"+ document.body.clientHeight; s += " 网页可见区域宽:"+ document.body.offsetWidth +" (包括边线的宽)"; s += " 网页可见区域高:"+ doc

  • this.clientWidth和this.offsetWidth两个有什么不同

    offsetWidth 包括边框的宽度  clientWidth 不包括 123123123 123123 123123 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解

    javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解

    scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相

  • scrollWidth,clientWidth与offsetWidth的区别

    scrollWidth  是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度). clientWidth  是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变.  offsetWidth  是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变. 一个scrollWidth和clientWidth的例子:  <html>  <head>  <title>77.htm文件</title>  </hea

  • HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解

    scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相

  • scrollWidth,clientWidth,offsetWidth的区别

    scrollWidth,clientWidth,offsetWidth的区别

    通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变. 该demo就在页面中放一个textarea元素,采用默认宽高显示. 情况1: 元素内无内容或者内容不超过可视区,滚动不出现或不可用的情况下. scrollWidth=

  • javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法

    关于js中的offsetWidth.clientWidth.scrollWidth等一系列属性及其方法一直都傻傻分不清,这里就来总结一下这些方法的用法和含义. 一.clientWidth和clientHeigh . clientTop和clientLeft 1,clientWidth的实际宽度 clientWidth = width+左右padding 2,clientHeigh的实际高度 clientHeigh = height + 上下padding 3,clientTop的实际宽度 cli

  • JavaScript中clientWidth,offsetWidth,scrollWidth的区别

    一.概念 它们都是Element的属性,表示元素的宽度: Element.clientWidth    内容+内边距-滚动条-----不包括边框和外边距  == 可视内容 Element.scrollWidth    内容+内边距+溢出尺寸-----不包括边框和外边距  ==实际内容 Element.offsetWidth   元素的宽度(内容+内边距+边框+滚动条)==整体,整个控件 二.举例 1.仅有横向滚动条的情况 <!DOCTYPE html> <html lang="

  • JavaScript中object和Object的区别(详解)

    JavaScript中object和Object的区别(详解)

    JavaScript中object和Object有什么区别,为什么用typeof检测对象,返回object,而用instanceof 必须要接Object呢 这个问题和我之前遇到的问题非常相似,我认为这里有两个问题需要解决,一个是运算符new的作用机制,一个是function关键字和Funtion内置对象之间的区别.看了一些前辈的博客和标准,这里帮提问者总结一下. 1.new new运算符的作用是创建一个对象实例.这个对象可以是用户自定义的,也可以是带构造函数的一些系统自带的对象.如果 new

  • javascript中局部变量和全局变量的区别详解

    javascript有两种变量:局部变量和全局变量.当然,我们这篇文章是帮助大家真正的区别这两种变量. 首先,局部变量是指只能在本变量声明的函数内部调用.全局变量时整个代码中都可以调用的变量.当然,单单从字面上理解肯定是不清楚的,下面我详细的介绍下: 大家都知道,变量是需要用var关键字声明的.但是javascript中也可以隐式的使用变量,就是不用声明,直接使用.而且,千万注意,javascript把隐式声明的变量总是当成全局变量来使用的. 例如: 复制代码 代码如下: function my

  • JavaScript中undefined和null的区别

     JavaScript中undefined和null的区别 JavaScript两个表示"无"的值:undefined和null.我在平时只是null用的多一点,undefined只是在报错中经常遇到.下面针对这两个数据类型的异同做一下详细的比较. 1.undefined和null在if语句中,都会被自动转为false,相等运算符直接报告两者相等. !null==!undefined==true 2.null表示"没有对象",即该处不应该有值.典型用法是: (1)

  • JavaScript中click和onclick本质区别与用法分析

    本文实例讲述了JavaScript中click和onclick本质区别与用法.分享给大家供大家参考,具体如下: 原生javascript的click在w3c里边的阐述是DOM button对象,也是html DOM click() 方法,可模拟在按钮上的一次鼠标单击. button 对象代表 HTML 文档中的一个按钮.button元素没有默认的行为,但是必须有一个 onclick 事件句柄以便使用. 语法:buttonObject.click() <html> <head> &l

  • javascript中call()、apply()的区别

    call().apply()的区别: 相同点: 1.call()和apply()都可以用来间接调用函数,都可以显式调用所需的this.即,任何函数可以作为任何对象的方法来调用. 2.两个方法都可以指定调用实参. 区别: call()和apply()的基本区别:在于将参数传递给函数. call():使用其自有的实参列表作为函数的参数: apply():要求以数组的形式传入参数. function track(o,m){ var original =o[m]; o[m] =function( ){

  • JavaScript中callee和caller的区别与用法实例分析

    JavaScript中callee和caller的区别与用法实例分析

    本文实例讲述了JavaScript中callee和caller的区别与用法.分享给大家供大家参考,具体如下: 1.callee 在函数的内部,有两个特殊的对象:arguments和this.其中arguments是一个类似数组的对象,包含着传入函数的所有参数. 虽然arguments的主要用途是保存函数参数,但这个对象有一个属性--callee,该属性是一个指针,指向拥有这个arguments对象的函数 所以callee的作用就是来指向当前对象 看一个阶层函数的例子就会明白他的用途了: /* *

  • JavaScript中toLocaleString()和toString()的区别实例分析

    本文实例讲述了JavaScript中toLocaleString()和toString()的区别.分享给大家供大家参考,具体如下: <javascript高级程序设计>解释: "toLocaleString()返回对象的字符串表示,该字符串与执行环境的地区对应:toString()返回对象的字符串表示:" 感觉还是不太好理解......来看几个实例: 字符串: var a = 6666; a.toLocaleString(); //"6,666" a.t

  • javascript中call,apply,bind的区别详解

    在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢. 在说区别之前还是先总结一下三者的相似之处: 1.都是用来改变函数的this对象的指向的. 2.第一个参数都是this要指向的对象. 3.都可以利用后续参数传参. 那么他们的区别在哪里的,先看一个例子. var xw = { name : "小王", gender : "男", age : 24, say : function() { alert(this.name + " ,

随机推荐