JS获取元素的大小(高度和宽度)
JS获取元素的大小(高度和宽度)
在 JavaScript中,使用下面 3 组属性可以获取元素的高度和宽度。如表所示。
元素尺寸属性 | 说明 |
---|---|
clientWidth | 获取元素可视部分的宽度,即 CSS 的 width 和 padding 属性值之和,元素边框和滚动条不包括在内,也不包含任何可能的滚动区域 |
clientHeight | 获取元素可视部分的高度,即 CSS 的 height 和 padding 属性值之和,元素边框和滚动条不包括在内,也不包含任何可能的滚动区域 |
offsetWidth | 元素在页面中占据的宽度总和,包括 width、padding、border 以及滚动条的宽度 |
offsetHeight | 元素在页面中占据的高度总和,包括 height、padding、border 以及滚动条的宽度 |
scrollWidth | 当元素设置了 overflow:visible 样式属性时,元素的总宽度,也称滚动宽度。在默认状态下,如果该属性值大于 clientWidth 属性值,则元素会显示滚动条,以便能够翻阅被隐藏的区域 |
scrollHeight | 当元素设置了 overflow:visible 样式属性时,元素的总高度,也称滚动高度。在默认状态下,如果该属性值大于 clientWidth 属性值,则元素会显示滚动条,以便能够翻阅被隐藏的区域 |
示例1
使用 offsetWidth 和 offsetHeight 属性获取元素的高度和宽度。
<div style="height:200px;width:200px;"><div style="height:50%;width:50%;"><div style="height:50%;width:50%;"><div style="height:50%;width:50%;"><div id="div" style="height:50%;width:50%;border-style:solid;"></div></div></div></div>
</div>
<script>var div = document.getElementById("div");var w = div.offsetWidth; // 返回元素的总宽度var h = div.offsetHeight; // 返回元素的总高度alert("div.offsetWidth =" + w);alert("div.offsetHeight =" +w);
</script>
上面示例在怪异模式和标准模式的浏览器中解析结果差异很大,其中怪异模式解析返回宽度为 21 像素,高度为 21 像素;而在标准模式的浏览器中返回高度和宽度都为 19 像素。
示例2
设计一个简单的盒子,盒子的 height 值为 200 像素,width 值为 200 像素,边框显示为 50 像素,补白区域定义为 50 像素。内部包含信息框,其宽度设置为 400 像素,高度也设置为 400 像素,即定义盒子的内容区域为(400px,400px)。
<div id="div" style="height:200px;width:200px;border:solid 50pxred;overflow:auto;padding:50px;"><div id="info" style="height:400px;width:400px;border:solid 1px blue;"></div>
</div>
演示效果如下:
现在分别调用 offsetHeight、scrollHeight、clientHeight 属性,可以看到获取不同区域的高度和宽度。
var div = document.getElementById("div");
var hc = div.clientHeight; //可视内容高度为283像素
var ho = div.offsetHeight; //占据页面总高度为400像素
var hs = div.scrollHeight; //展开滚动内容总高度为452像素
演示效果如下:
查看 offsetHeight、scrollHeight、clientHeight 这 3 个属性的不同,具体说明如下:
- clientHeight = padding-top+height+border-buttom-width- 滚动条的宽度
- offsetHeight = border-top-width+padding-top+height+padding-buttom+border-buttom-width
- scrollHeight = padding-top+包含内容的完全高度+padding-bottom
上面围绕元素高度进行说明,针对宽度的计算方式可以以此类推。
offsetWidth 和 offsetHeight 是获取元素宽度和高度的最好方法,但是当元素隐藏显示时,即设置样式属性 display 的值为 none 时,offsetWidth 和 offsetHeight 属性返回值都为 0。
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
网页可见区域高:document.body.clientHeight
网页正文全文高:document.body.scrollHeight
网页可见区域高(包括边线的高):document.body.offsetHeight
网页被卷去的高:document.body.scrollTop
屏幕分辨率高:window.screen.height
每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性,单凭单词很难搞清楚分别代表什么意思之间有什么区别。通过阅读它们的文档总结出规律如下:
clientHeight和offsetHeight属性和元素的滚动、位置没有关系它代表元素的高度,其中:
clientHeight:包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。
offsetHeight:包括padding、border、水平滚动条,但不包括margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。
接下来讨论出现有滚动条时的情况:
当本元素的子元素比本元素高且overflow=scroll时,本元素会scroll,这时:
scrollHeight: 因为子元素比父元素高,父元素不想被子元素撑的一样高就显示出了滚动条,在滚动的过程中本元素有部分被隐藏了,scrollHeight代表包括当前不可见部分的元素的高度。而可见部分的高度其实就是clientHeight,也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义,在没有滚动条时scrollHeight==clientHeight恒成立。单位px,只读元素。
scrollTop: 代表在有滚动条时,滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px,可读可设置。
offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px,只读元素。
个人总结:
clientHeight:可视区域内容高度,不包含border和padding
offsetHeight:盒子的真实高度,包括border和padding
scrollHeight:盒子内容的真实高度,包括滚动
JS获取元素的大小(高度和宽度)相关推荐
- JS获取屏幕浏览器网页高度和宽度属性
1 网页可见区域宽:document.body.clientWidth 2 网页可见区域高:document.body.clientHeight 3 网页可见区域宽:document.body.off ...
- js获取页面的各种高度与宽度
document.body.scrollTop等属性可以获取页面滚动距离等,但是此类属性在xhtml标准网页或者更简单的说是带<!DOCTYPE ..>标签的页面里得到的结果是0, 所以一 ...
- js获取当前浏览器页面高度及宽度信息的方法
function getInfo() { var s = ""; s += " 网页可见区域宽:" ...
- html 获取页面元素高度,浅谈JavaScript获取元素的大小(高度和宽度)的方法
本篇文章给大家介绍一下JavaScript获取元素的大小(高度和宽度)的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在 JavaScript 中,使用下面 3 组属性可以获 ...
- js 获取元素位置和大小_js 位置_Js宽度高度(详解)
一.js 获取元素的位置和大小----只读属性 1.元素的大小和位置 1.可视大小和位置 clientLeft,clientTop,clientWidth,clientHeight clientLef ...
- js获取html body的宽度,JS获取元素的宽度和高度
在 JavaScript 中,使用元素的 offsetWidth 和 offsetHeight 属性可以分别获取元素的包含边框的宽度和高度:而 clientWidth 和 clientHeight 属 ...
- 原生js获取元素高度
原生js获取元素高度 <div id='container'></div> let dom = document.getElementById('contanier')dom. ...
- JS 获取浏览器、显示器 窗体等宽度和高度
转载自 JS 获取浏览器.显示器 窗体等宽度和高度 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见 ...
- JS获取当前对象大小以及屏幕分辨率等...
<!DOCTYPE html> <html> <head><meta charset="utf-8"/><meta name= ...
最新文章
- 通知栏管理NotificationListenerService
- iterm2 mac链接linux工具 桌面程序Transmit
- 2.oracle分页,找到员工表中薪水大于本部门平均薪水的员工
- STL:大小写字母转换、字符转数字、char*转string(未完待续)
- 一个小厂前端 Leader 如何筛选候选人?
- 使您的Java代码闻起来很新鲜
- Oracle安装 - shmmax和shmall设置
- python random randint_python中random.randint(1,100)随机数中包不包括1和100
- 程序员杂志为啥没有了_计算机基础知识,程序员必备知识,java必会!新建一个TXT,发生了什么?...
- 阿里云携手印度电信巨头 网络互连覆盖150个国家地区
- EDIUS如何缩短时间线长度
- 公达 TP-POS58G 打印机驱动
- Linux下go环境安装、环境配置并执行第一个go程序
- 计算机组装日记,求微机组装与维护实习日记?
- 计算机视觉:视频分解图片和图片合成视频
- python将xls转换为xlsx_python – 如何将xls转换为xlsx
- 根据拓扑图,实现PC端通交换机ping通路由器loop back地址
- Spark内核设计的艺术:架构设计与实现——前言
- C语言源代码系列-管理系统之电子英汉词典
- KNN(k-nearest neighbor的缩写)最近邻算法原理详解
热门文章
- 风炫安全Web安全学习第四十三节课 路径遍历漏洞
- 2.5.13 动态内存扩展AME
- 【2017全球AI创业公司Top10】切入主流行业,中国只有这一家入选
- 华为手机网络连接不可用怎么解决_“怎么造”和“有啥用”——5G手机亟需解决的两个现实问题...
- 什么是响应式设计?响应式设计的基本原理是什么?如何做?
- Excel只选中有数字的行或列并删除的方法(详细)
- android7.0新特性 tv,NV老款Shield TV获更新:Android7.0/4K HDR支持
- JAVAP反编译中助记符的含义
- C语言 子兔一月变成兔 成兔一月生子兔 程序实现
- 推荐几个程序员接私活的网站