javascript 元素的大小
1、偏移量
元素的可见大小由其高度、宽度决定,包括所有内边距、滚动条和边框大小(不包含外边距)。通过下列4个属性可以获取元素的偏移量:
offsetHeight:
offsetWidth:
offsetLeft:元素的左外边框包含元素的左内边距的像素距离;
offsetTop:元素的上外边框至包含元素上内边距的像素距离。
其中,offsetLeft和offsetTop属性与包含元素有关,包含元素的引用保存在offsetParent属性中。
2、客户区大小
元素的客户区大小,指的是元素内容及其内边距所占据的空间大小。有关客户区大小的属性有两个:clientWidth和clientHeight。
其中,clientWidth属性是元素内容区宽度加上左右内边距宽度;clientHeight属性是元素内容区高度加上上下内边距高度。
clientWidth = padding + width;
clientHeight = padding + height;
客户区大小就是元素内部的空间大小,因此滚动条占用的空间不在内。要确定浏览器的视口大小,可以使用document.documentElement或document.body的clientWidth和clientHeight。
3、滚动大小
滚动大小指的是包含滚动内容的元素的大小。有些元素,即使没有执行任何代码也能添加滚动条;但另外一些元素,则需要通过CSS的overflow属性进行设置才能滚动。以下是4个与滚动大小相关的属性。
scrollHeight:在没有滚动条的情况下,元素内容的总高度
scrollWidth:在没有滚动条的情况下,元素内容的总宽度
scrollLeft:被隐藏在内容区域左侧的像素数
scrollTop:被隐藏在内容区域上方区域的像素数
scrollWidth和scrollHeight主要用于确定元素内容的实际大小。通常认为<html>元素是在web浏览器的视口中滚动的元素。因此,带有垂直滚动条的页面总高度就是document.documentElement.scrollHeight。
javascript 元素的大小的更多相关文章
- JavaScript的DOM操作获取元素的大小
通过 style 内联获取元素的大小 需要注意的是style 获取只能获取到行内 style 属性的 CSS 样式中的宽和高,如果有获取:如果没有则返回空. <!DOCTYPE html> ...
- JavaScript的DOM操作获取元素实际大小
clientWidth 和 clientHeight 这组属性可以获取元素可视区的大小,可以得到元素内容及内边距所占据的空间大小. 返回了元素大小,但没有单位,默认单位是 px,如果你强行设置了单位, ...
- javascript 设置元素滚动大小
3. 滚动大小 最后要介绍的是滚动大小(scroll dimension),指的是包含滚动内容的元素的大小. 有些元素(例如 元素),即使没有执行任何代码也能自动地添加滚动条:但另外一些元素,则需要通 ...
- 【全面总结】js获取元素位置大小
[js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...
- Javascript 验证上传图片大小[客户端验证]
需求分析: 在做上传图片的时候,如果不限制上传图片大小,后果非常的严重.那么我们怎样才可以解决一个棘手的问题呢?有两种方式: 1)后台处理: 也就是AJAX POST提交到后台,把图片上传到服务器上, ...
- 彻底弄懂设置根元素字体大小calc(100vw/18.75) 实现rem自适应
rem 是相对文档根元素(html)字体大小的尺寸单位,当元素的尺寸或文字字号等使用 rem 单位时,会随着根元素的 font-size 变化而变化,那么在不同分辨率的设备下动态设置根元素的字体大小就 ...
- JavaScript的DOM操作获取元素周边大小
一.clientLeft 和 clientTop 这组属性可以获取元素设置了左边框和上边框的大小,目前只提供了 Left 和 Top 这组,并没有提供 Right 和 Bottom. <scri ...
- 在HTML中使用JavaScript元素
script属性<script async = async charset="utf-8" defer="defer" src="index.h ...
- JavaScript 控制字体大小设置
在做公司的官网的时候,新闻内页会有一个让浏览者自己调整文字大小的功能,因此在这个空闲时间,把这个功能整理下来: function setFontSize (id,content,params){ va ...
随机推荐
- python之特点
.python区分大小写:2.注释规范:python使用井号#作为单行注释,且注释的位置,一般放在要注释代码的前一行或这代码的右侧:多行注释则可以用连续三个单引号开始一行,并连续三个单引号在要注释的代 ...
- 下载并安装Cent OS 6.5
到官网下载centos 6.5指引 官网:https://www.centos.org/ [当然也可以通过百度搜索,然后打开] 进入官网,选择"Get CentOS Now" ...
- Java IO:字节流与字符流
https://blog.csdn.net/my_truelove/article/details/53758412 字符和字节之间可以互相转化,中间的参照就是编码方式. 相当于给你一个密码本,按照这 ...
- 关于本地文件请求json文件
因为需要用到json数据格式,上网查了一下例子之后我就想本地测试一下看能不能成功. 结果,chrome下没有任何反应,打开控制台之后报错如下: XMLHttpRequest cannot load f ...
- selenium(6):通过多种定位方式还是不能成功定位的原因
场景:在成功修改密码后,会弹出一个修改成功的提示.通过id.xpath.class.css方式定位后,执行到这一步时候,就会出现错误. 原因:仔细检查了下代码,发现在提交修改的操作到修改成功的提示之间 ...
- maven本地仓库有jar包,maven install还是报错识别不到
去本地仓库对应jar的目录下看下,有一个 _remote.repositories 的文件打开 ***.pom>xxx=***.jar>xxx= 这个 xxx 就是你maven的setti ...
- 【JZOJ5068】【GDSOI2017第二轮模拟】树 动态规划+prufer序列
题面 有n个点,它们从1到n进行标号,第i个点的限制为度数不能超过A[i]. 现在对于每个s (1 <= s <= n),问从这n个点中选出一些点组成大小为s的有标号无根树的方案数. 10 ...
- PHP7捕获错误异常方法
这种 Error 异常可以像 Exception 异常一样被第一个匹配的 try / catch 块所捕获.如果没有匹配的 catch 块,则调用异常处理函数(事先通过 set_exception_h ...
- SPSS分析技术:无序多元Logistic回归模型;美国总统大选的预测历史及预测模型
SPSS分析技术:无序多元Logistic回归模型:美国总统大选的预测历史及预测模型 在介绍有序多元Logistic回归分析的理论基础时,介绍过该模型公式有一个非常重要的假设,就是自变量对因变量多个类 ...
- MAC+VS Code+Python+Markdown调试配置
目录 VS Code官网下载 VS Code插件推荐 VS Code Python环境配置 Markdown配置 VS Code官方文档 VS Code官网下载 VS Code官网下载地址 VS Co ...