clientWidth、clientHeight、offsetWidth、offsetHeight以及scrollWidth、scrollHeight是几个困惑了好久的元素属性,趁着有时间整理一下

1. clientWidth 和 clientHeight

网页中的每个元素都具有 clientWidth 和 clientHeight 属性,表示可视区域的宽高,即元素内容加上padding以后的大小,而不包括border值和滚动条的大小,

如下图所示:

示例代码如下:

HTML代码:

<div id="demo">
<p></p>
</div>

CSS代码:

div{
width: 100px;
height: 100px;
overflow: scroll;
border:20px solid #7b7676;
padding: 30px;
margin: 60px;
}
p{
width: 180px;
height: 160px;
background: #aac7aa;
}

如下图:

从上图得出:

clientWidth = 内容 + padding 即 83+30*2 = 143

clientHeight = 内容 + padding 即 83+30*2 = 143

2. scrollWidth 、scrollHeight 、scrollLeft、scrollTop

scrollWidth 和 scrollHeight 表示内容的完整宽高,包括padding以及没有完全显示出来的部分,不包括滚动条

scrollWidth = padding+包含内容的完全宽度

scrollHeight = padding+包含内容的完全高度

scrollLeft和scrollTop都表示滚动条滚动的部分

如下图:

依然利用上面的例子:

scrollWidth:160 + 30 = 190

scrollHeight:180 + 30 = 210

至于为什么padding只加30而不是30*2呢,如上图所示,超出隐藏部分距离父元素边框是没有padding的,所以只加一个

3. offsetWidth  和 offsetHeight

如下图所示:

offsetWidth表示元素本身的宽度,包括滚动条和padding,border

offsetHeight表示元素本身的高度,包括滚动条和padding,border

所以例子中的offsetWidth = 100 + 20 * 2 + 30 * 2 = 200

offsetHeight = 100 + 20 * 2 + 30 *2 = 200

offsetTop 和 offsetLeft 表示该元素的左上角与父容器(offsetParent对象)左上角的距离

参考链接:http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html

by新手小白的记录

clientWidth、clientHeight、offsetWidth、offsetHeight以及scrollWidth、scrollHeight的更多相关文章

  1. JS中的offsetWidth/offsetHeight/offsetTop/offsetLeft、clientWidth/clientHeight/clientTop/clientLeft、scrollWidth/scrollHeight/scrollTop/scrollLeft

    这是一组非常容易弄混的参数!都是描述某个盒子元素的宽度.高度以及上或左的距离偏移量. 1. offsetWidth / offsetHeight(不包括外边距) offsetWidth:返回元素的宽度 ...

  2. innerHeight,clientHeight,offsetHeight,scrollWidth等的区别和用法

    要理解这几个属性,首先要搞明白body,documentElement的区别 1.body是DOM对象里的body子节点,即<body>标签2.documentElement是整个节点树的 ...

  3. 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  4. offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别

    offsetWidth/offsetHeight返回值包含content + padding + border,效果与e.getBoundingClientRect()相同 clientWidth/c ...

  5. JavaScript--clientX,clientY、pageX,pageY、offsetLeft,offsetTop/offsetWidth,offsetHeight、scrollLeft,scrollTop/scrollWidth,scrollHeight、clientHeight,clientWidth区别

    /*在事件的内部console.dir(event)*/ /** * 事件对象event * clientX/clientY 获取鼠标基于浏览器窗口(可视区域的坐标位置)全兼容 * * pageX/p ...

  6. offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight,clientX,pageX,screenX

    offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度 ...

  7. 浏览器中如何获取想要的offsetwidth、、、clientwidth、、offsetheight、、、clientheight。。。

    clientWidth是对象看到的宽度(不含边线,即border)scrollWidth是对象实际内容的宽度(若无padding,那就是边框之间距离,如有padding,就是左padding和右pad ...

  8. 详解clientHeight、offsetHeight、scrollHeight

    关于clientHeight.offsetHeight.scrollHeight   window.screen.availWidth 返回当前屏幕宽度(空白空间)  window.screen.av ...

  9. js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop。(转)

    js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop. 分类: js.jquery.ext.js技术2011 ...

随机推荐

  1. 20.2 解析与序列化【JavaScript高级程序设计第三版】

    JSON 之所以流行,拥有与JavaScript 类似的语法并不是全部原因.更重要的一个原因是,可以把JSON 数据结构解析为有用的JavaScript 对象.与XML 数据结构要解析成DOM 文档而 ...

  2. Pig关系型运算符例子

    1.新建两个文件A.txt与B.txt, A.txt文件的内容如下: 0,1,2 1,3,4 B.txt文件的内容如下: 0,5,2 1,7,8 将这两个文件上传到目录/zwy/soft 2.定义关系 ...

  3. 九、IIC驱动原理分析

    学习目标:学习IIC驱动原理: 一.IIC总线协议 IIC串行总线包括一条数据线(SDA)和一条时钟线(SCL),支持“一主多从”和“多主机”模式:每个从机设备都有唯一的地址来识别. 图 1 IIC ...

  4. C语言实现斐波那契数列

    1.函数一用递归实现 2.函数二用循环实现 #include<stdio.h> #include<stdlib.h> #pragma warning(disable:4996) ...

  5. 014---Django的中间件

     前戏 我们在前面的课程中已经学会了给视图函数加装饰器来判断是用户是否登录,把没有登录的用户请求跳转到登录页面.我们通过给几个特定视图函数加装饰器实现了这个需求.但是以后添加的视图函数可能也需要加上装 ...

  6. JAVA 反射之Method

    ★ Method没有构造器,只能通过Class获取. 重点方法: class.getDeclaredMethods():获取所有方法. class.getDeclaredMethod(String n ...

  7. (数据科学学习手札21)sklearn.datasets常用功能详解

    作为Python中经典的机器学习模块,sklearn围绕着机器学习提供了很多可直接调用的机器学习算法以及很多经典的数据集,本文就对sklearn中专门用来得到已有或自定义数据集的datasets模块进 ...

  8. phpMyAdmin出现错误 Access denied for user 'root'@'localhost' (using password: NO)

    今天安装wmpp,之后启动后点击phpMyAdmin 报拒绝连接错误:#1045 - Access denied for user 'root'@'localhost' (using password ...

  9. MySQL共享表空间扩容

    一.什么是共享表空间和独占表空间 共享表空间以及独占表空间都是针对数据的存储方式而言的. 共享表空间: 某一个数据库的所有的表数据,索引文件全部放在一个文件中,默认这个共享表空间的文件路径在data目 ...

  10. 从循环里面用QPixmap new对象很耗时联想到的

    1.在循环里面用QPixmap new图片对象延迟很高,这个是通过打时间日志得出的,深层原因还不清楚: 2.自制的图片浏览器在初始化的时候会初始化自己的一个图片列表,所以要用到上面的描述.所有图片的初 ...