JS获取div高度的方法
有时在写页面时,需要获取一个div的高度。怎么才能获取呢?哈哈,先上结论。有两种方法。
- offsetHeight 、clientHeight
- getComputedStyle
offsetHeight 与 clientHeight
这两个属性都能获取元素的高度,它们有什么区别呢?
代码说话~
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<meta charset="utf-8">
<style type="text/css">
#demo {
width: 100px;
height: 200px;
background: yellow;
margin: 10px;
padding: 10px;
border: 2px solid blue;
}
</style>
</head>
<body>
<div id="demo">hello</div>
<script type="text/javascript">
var div = document.getElementById('demo');
console.log(div.offsetHeight); // 224
console.log(div.clientHeight); // 220
</script>
</body>
</html>
可以看出
offsetHeight = content + border + padding = 200 + 2 * 2 + 10 * 2 = 224
clientHeight = content + padding = 200 + 2 * 10 = 220
两个属性的差距于是就显而易见了。同样返回元素的高度,offsetHeight的值包括元素内容+内边距+边框,而clientHeight的值等于元素内容+内边距。区别就在于有没有边框~
但是,问题来了,我们想获取元素本身的高度呢?于是——
请往下看~
1,有小伙伴可能会说,我们可以直接利用style
属性获取元素高度。然而在上面的代码中,
console.log(div.style.height) // ''
为空!
这是因为style
属性只能获取元素标签style
属性里的值。对于一个光秃秃的<div>
,style
的输出是空的。
下面把内部样式表中的高度注释掉,写在行内样式中,改动如下。
#demo {
width: 100px;
/*height: 200px;*/
background: yellow;
margin: 10px;
padding: 10px;
border: 2px solid blue;
}
<div id="demo" style="height: 200px">hello</div>
这个时候style
属性的输出为
console.log(div.style.height) // 200px
完美获得元素高度。
可是。问题又来了,如果我们每次都要写成内联样式,也太费事了吧。那么,该怎么办?
2,getComputedStyle
getComputedStyle
方法获取的是最终应用在元素上的所有CSS属性对象(即使没有CSS代码,也会把默认的祖宗八代都显示出来);这和style
属性只能获取内联样式的行为形成了鲜明的对比。除此之外,getComputedStyle
是只读的,但是style
能文能武,可读可写,我们也可以利用它动态设置元素的高度。
我们只需输入这么一行代码。
window.getComputedStyle(div);
我只截了部分,可以清晰地看到,getComputedStyle
方法取得了元素的所有样式。
嗯,很适合查询。
可是我们只想要高度呀。那就让getPropertyValue
方法来帮忙getPropertyValue
方法可以获取CSS样式申明对象上的属性值。
如。
console.log(window.getComputedStyle(div).getPropertyValue('height')); // 200px
耶,问题解决。
顺便要说一下,currentStyle
属性也可以利用,不过这是IE浏览器的自娱自乐。兼容性极差。
想要更深入研究的,请参考张鑫旭大神的博客获取元素CSS值之getComputedStyle方法熟悉,再次膜拜大神~
---8.16补充---
根据@漫漫前端的评论,还有一种方法。
Element.getBoundingClientRect()方法获取与元素相关的CSS属性边框集合。
返回对象中共有6个属性。
当计算边界矩形时,会考虑视口区域(或其他可滚动元素)内的滚动操作,也就是说,当滚动位置发生了改变,top和left属性值就会随之立即发生变化(因此,它们的值是相对于视口的,而不是绝对的)。如果不希望属性值随视口变化,那么只要给top、left属性值加上当前的滚动位置(通过window.scrollX和window.scrollY),这样就可以获取与当前的滚动位置无关的常量值。
详情请参考Element.getBoundingClientRect()
再次END。
作者:公子七
链接:https://www.jianshu.com/p/58c12245c2cc
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
原文 JS获取div高度的方法
JS获取div高度的方法的更多相关文章
- JS获取网页宽高方法集合
JS获取网页宽高等方法的集合:document.body.clientWidth - 网页可见区域宽document.body.clientHeight - 网页可见区域高 document.body ...
- js获取div基础元素
1.js获取div元素 clientHeight 获取对象的高度,不计算任何边距.边框.滚动条,但包括该对象的补白. clientLeft 获取 offsetLeft 属性和客户区域的实际左边之间的距 ...
- JS获取标签内容的方法
JS获取标签内容的方法 测试代码 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- js获取浏览器高度和宽度值,尽量的考虑了多浏览器。
js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...
- js获取url参数的方法
js获取url参数的方法有很多. 1.正则分析 function getQueryString(name) { var reg = new RegExp("(^|&)" + ...
- jquery、js获取页面高度宽度等
jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...
- (转)用JS获取地址栏参数的方法(超级简单)
转自http://www.cnblogs.com/fishtreeyu/archive/2011/02/27/1966178.html 用JS获取地址栏参数的方法(超级简单) 方法一:采用正则表达式获 ...
- 【转】js 获取浏览器高度和宽度值(多浏览器
原文地址:http://www.jb51.net/article/19844.htm js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ...
- js获取url传值的方法
这篇文章主要介绍了js获取url传值的方法,实例分析了字符串分割与正则分析两种方法,并补充了一个基于正则匹配实现的js获取url的get传值函数,需要的朋友可以参考下 js获取url参数值: inde ...
随机推荐
- CSS图片Img等比例缩放且居中显示
常用来做图片放大显示的遮罩层imgScale HTML <div id="imgScale" > <img src=""> </d ...
- PHP常见算法
算法的概念:解决特定问题求解步骤的描述,在计算机中表现为指令的有限序列,并且每条指令表示一个或多个操作.一个问题可以有多种算法,每种算法都不同的效率.一个算法具有的特征:有穷,确切,输入,输出,可行 ...
- 5.Redis的持久化
Redis中数据的持久化有两种方式:RDB(Redis DataBsse) 和 AOF(Append Only File),默认采取的是RDB方式 RDB 1.是什么:在指定的时间间隔内将内存中的数据 ...
- Image Processing and Analysis_8_Edge Detection:Edge and line oriented contour detection State of the art ——2011
此主要讨论图像处理与分析.虽然计算机视觉部分的有些内容比如特 征提取等也可以归结到图像分析中来,但鉴于它们与计算机视觉的紧密联系,以 及它们的出处,没有把它们纳入到图像处理与分析中来.同样,这里面也有 ...
- U盘不能复制4G以上的单个文件如何处理?
制作好雨后清风U盘启动盘后,有朋友在将雨后清风系统镜像文件拷贝传输至U盘时,会发现U盘提示文件过大,无法进行传输,但是U盘的剩余存储空间明显还足够,这是怎么回事呢? 其实这是U盘文件系统格式的原因,如 ...
- 2.Vue调试工具vue-devtools的安装步骤和使用
1.安装步骤: 打开谷歌浏览器设置 -->扩展程序 -->勾选开发者模式 --->加载已解压的扩展程序 --->选择“chrome扩展”文件夹即可:
- ubuntu安装supervisor
1. Ubuntu14中supervisor的安装及配置 2. Ubuntu 14.04下进程管理工具supervisor安装 3. Supervisor使用教程 4. supervisor在deep ...
- 库克谈新iPhone不支持5G的理由,学习一下如何高手怎么应答
库克谈新iPhone不支持5G的理由 投递人 itwriter 发布于 2019-09-12 08:41 评论(14) 有1623人阅读 原文链接 [收藏] « » 9 月 12 日消息,苹果公司 C ...
- jquery进行each遍历时,根据条件取消某项操作
示例代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- Java&Selenium 模拟键盘方法封装
Java&Selenium 模拟键盘方法封装 package util; import java.awt.AWTException; import java.awt.Robot; import ...