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 ...
随机推荐
- 安装mysql时出现 mysql Install/Remove of the Service Denied! 错误的解决办法
用cmd在mysql的bin目录下面执行: mysqld --install 命令,出现错误: mysql Install/Remove of the Service Denied! 解决方法:以管理 ...
- JavaScript--关于闭包(closure)
js代码在执行前会做的几件事情: 1.代码检测 2.预编译:在执行代码之前会对代码中的函数以及变量提前声明 并且做一些其他的处理 1.函数在执行前的一瞬间,会生成一个OA(object action) ...
- Django路由及函数视图
路由系统 在django中,uri与逻辑函数的对应关系我们称之为路由系统 伪静态 伪静态是相对于静态文件来说的,例如https://www.cnblogs.com/hesujian/p/1116581 ...
- Centos6.5 自带的Python2.6.6 如何安装setuptools和pip
setuptools-36.7.1 [root@ ]# wget https://files.pythonhosted.org/packages/a9/23/720c7558ba6ad3e0f5ad0 ...
- redis集群安装2
概要:本文主要介绍如何在Centos7中单机搭建redis集群三主三从,按照本文绝对可以实现该需求,至于先搭建单机版主要为了方便理解redis集群,为下一步开发或生产上redis集群做铺垫.同时本 ...
- with语句和空语句
with语句能够为一组语句创建缺省的对象,在一组语句中,任何不指定对象的属性引用都将被认为是缺省对象. 语法如下: with(object){ statements; } <body> & ...
- java与.net_20190726
特性与注解 方法首字母 Java没有ref和out关键字 Java的main方法与C#的Main方法不一样: Java的io类和C#不一样. java的jsp和aspx还是很类似的. Java的ser ...
- JVM之Java运行时数据区(线程共享区)
JVM运行时区域各线程共享的区域包括堆区和方法区. 堆区 堆区最最主要的功能是存储对象实例[上篇也提到过],因此Java垃圾回收的主要战场就是在堆区,因此也有称为GC堆区.如果堆区的内存不够会出现Ou ...
- linux实操_shell运算符
1."$((运算式))"或"[运算式]" 2.expr m + n 注意:expr运算符要有空格 3.expr m - n 4.expr \*,/,/% 乘,除 ...
- 算法:统计1-n中,1出现的次数
package edu.cqu.algorithmTest; import java.util.Scanner; /* * 给定一个十进制正整数N,写下从1开始,到N的所有整数,然后数一下其中出现的所 ...