clientWidth、clientHeight、offsetWidth、offsetHeight以及scrollWidth、scrollHeight

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新手小白的记录

 

转载于:https://www.cnblogs.com/lynnmn/p/6383246.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/429642.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机组成原理题库带答案详解,计算机组成原理试试题库(含答案解析) -.doc

Word文档下载可编辑专业技术资料计算机组成原理试题一、单项选择题(从下列各题四个备选答案中选出一个正确答案&#xff0c;并将其代号写在题干前面的括号内。)1.为了缩短指令中某个地址段的位数&#xff0c;有效的方法是采取(C)。A、立即寻址B、变址寻址C、间接寻址 D、寄存器…

51Nod--1100-斜率最大

51Nod--1100-斜率最大 1100 斜率最大平面上有N个点&#xff0c;任意2个点确定一条直线&#xff0c;求出所有这些直线中&#xff0c;斜率最大的那条直线所通过的两个点。 &#xff08;点的编号为1-N&#xff0c;如果有多条直线斜率相等&#xff0c;则输出所有结果&#xff0c;按…

张掖计算机职称考试,甘肃省张掖市2018年3月计算机等级考试公告

&nbsp&nbsp[导读]:甘肃省张掖市2018年3月计算机等级考试甘肃省2018年3月全国计算机等级考试报名时间&#xff1a;2017年12月13日—2018年01月7日&#xff0c;打印准考证时段&#xff1a;2018年3月11—26日甘肃省张掖市2018年3月计算机等级考试公告一、报考条件考生不受…

【多视图几何】TUM 课程 第2章 刚体运动

课程的 YouTube 地址为&#xff1a;https://www.youtube.com/playlist?listPLTBdjV_4f-EJn6udZ34tht9EVIW7lbeo4 。视频评论区可以找到课程所使用课件与练习题的下载地址。 课程第2章从李群与李代数的角度介绍三维空间的刚体运动。李群即常见的旋转矩阵、变换矩阵&#xff0c;…

计算机教师成长计划,2020年信息技术教师个人工作计划

本学期我主要担任以下几个方面的工作&#xff1a;初二1到10班的信息技术课的教学工作以及学生的信息学奥赛小组的辅导工作以及学校安排的信息技术方面的日常工作等。同时本学期还有一个重要工作就是做一个完整的信息技术课题——初中信息技术基于小组协作竞争环境的“任务驱动”…

查询成绩小于85且是计算机的一项应用,查询练习2

查询练习创建表学生表student学号姓名性别出生日期班级create table student(sno varchar(20) primary key,sname varchar(20) not null,ssex varchar(10)not null,sbirthday datetime,class varchar(20));课程表Course课程号课程名称教师编号create table course(cno varchar(…

NTP时间服务器

1. NTP简介NTP&#xff08;Network Time Protocol&#xff0c;网络时间协议&#xff09;是用来使网络中的各个计算机时间同步的一种协议。它的用途是把计算机的时钟同步到世界协调时UTC&#xff0c;其精度在局域网内可达0.1ms&#xff0c;在互联网上绝大多数的地方其精度可以达…

计算机高办报名时间,前方高能!计算机信息技术证报名入口、考试时间已发布...

前方高能&#xff01;计算机信息技术证报名入口、考试时间已发布和发达***相比&#xff0c;我国的计算机信息技术在实际应用的过程中&#xff0c;还存在着许多的局限性&#xff0c;这就使其在使用是计算机信息技术的应用效果无法达到理想的状态。计算机信息技术证报名入口、考试…

API文档工具-Swagger的集成

最近安装了API文档工具swagger&#xff0c;因为Github上已有详细安装教程&#xff0c;且安装过程中没有碰到大的阻碍&#xff0c;所以此文仅对这次安装做一份大致记录 相关网站 Swagger 官方地址&#xff1a;http://swagger.wordnik.com Github安装详解【springmvc集成swagger】…

计算机翻译辅助工具安卓版,计算机辅助翻译软件

OmegaT是一款电脑翻译软件&#xff0c;此软件能够帮助用户对一些机器专业语言进行快速翻译&#xff0c;目前软件支持任何Java的操作系统&#xff0c;用户无需担心系统不支持的问题。另外&#xff0c;软件可以在任意目录中搜索所支持的格式的文件&#xff0c;翻译速度快、准确性…

计算机应用基础试模块5ACCSE,2015年计算机二级《Access》上机最后冲刺卷(1)

二、基本操作题41在考生文件夹下的“Acc1.mdb”数据库中已建立表对象“职工”。试按以下操作要求&#xff0c;完成对表“职工”的编辑修改和操作&#xff1a;(1)将“职工号”字段改名为“编号”&#xff0c;并设置为主键。(2)设置“年龄”字段的有效性规则为“年龄>20”。(3…

情人节引发的血案

首先&#xff0c; 如果你能看到这句话&#xff0c;那我就应该恭喜你&#xff0c;你已经被此文的标题所吸引。不过&#xff0c;千万不要想太多&#xff0c;此文不是什么《今日说法》&#xff0c;但也与法有那么一丁点的关系&#xff1b;此文也不是什么《我们约会吧》&#xff0c…

css 可编辑,如何设置DIV可编辑

「来源: &#xff5c;web前端开发 ID&#xff1a;web_qdkf」如何让一个div变成可编辑状态&#xff0c;比如富文本的输入框就可以用可编辑的div(自定义一个富文本时可用)&#xff0c;类似textare。有2种方案可以实现&#xff1a;1是通过contenteditable属性设置为true&#xff0…

Java中的局部变量表及使用jclasslib进行查看

直接上下载地址 jclasslib是一个独立的工具&#xff0c;不是包含在JDK中的工具&#xff0c;需要自己进行下载&#xff0c;下载地址如下&#xff1a; http://downfile.downcc.com/down/JClassLib_windows.zip 什么是局部变量表 在《java中的栈》中我们说到了一个栈帧至少需要包含…

在线学ajax,ajax学习

AJAX&#xff1a;1. 概念&#xff1a; ASynchronous JavaScript And XML异步的JavaScript 和 XML1. 异步和同步&#xff1a;客户端和服务器端相互通信的基础上* 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。* 客户端不需要等待服务器端的响应。在服务器处…

绝对定位和浮动的区别和运用

当一个元素使用绝对定位后&#xff0c;它的位置将依据浏览器左上角开始计算或相对于父容器&#xff08;在父容器使用相对定位时&#xff09;。 绝对定位使元素脱离文档流&#xff0c;因此不占据空间。普通文档流中元素的布局就当绝对定位的元素不存在时一样。因为绝对定位的框与…

服务器网盘系统怎么装,云服务器上怎么安装操作系统

云服务器上怎么安装操作系统 内容精选换一换安装传输工具在本地主机和Windows云服务器上分别安装数据传输工具&#xff0c;将文件上传到云服务器。例如QQ.exe。在本地主机和Windows云服务器上分别安装数据传输工具&#xff0c;将文件上传到云服务器。例如QQ.exe。本地磁盘映射(…

Ubuntu 16.04 64位安装YouCompleteMe

之前记录在OneNote上感觉有点乱&#xff0c;而且不适合保存shell&#xff0c;这次重新安装又出问题了&#xff0c;干脆写篇博客记录。 从零开始 1、git&#xff08;用来下载vim和相关插件&#xff09; sudo apt-get install git2、cmake&#xff08;用来编译clang-llvm&#xf…

学大数据找IT十八掌

《IT十八掌大数据内功修炼到企业实战2.0课程》免费自学马拉松计划 1、关于十八掌 学了大数据&#xff0c;还是不敢找工作&#xff1f; 内功不够&#xff01;跟随十八掌掌门徐培成炼内功&#xff01; 十八掌教育努力打造一套地表最强【大数据云计算】内功修炼系列课程&#xff…

OSG设置警告等级

osg::setNotifyLevel(osg::FATAL);//控制台只输出严重错误信息转载于:https://www.cnblogs.com/coolbear/p/6420494.html