获取一个元素的实际高度？

sirzxj 2012-08-19 10:37:10

设置了 overflow-y:scroll 的时候，获取实际的文档高度

...全文

196 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

anglechengd 2012-08-19

打赏
举报

回复

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

 </head>

 <style type="text/css">

	div{width:200px;height:100px;border:1px solid gray;overflow-y:scroll;}

 </style>

<script type="text/javascript">

	function getHeight(){

		var div=document.getElementsByTagName("div")[0];

		alert("文档高度： "+div.scrollHeight);

//		alert(div.scrollTop);

//		alert("div 高度："+div.clientHeight);

//		alert(div.offsetHeight);

		

		

		

	}

</script>

 <body>

  <div>

  <label>1</label><br/>

  <label>2</label><br/>

  <label>3</label><br/>

  <label>4</label><br/>

  <label>5</label><br/>

  <label>6</label><br/>

  <label>7</label><br/>

  <label>8</label><br/>

  <label>9</label><br/>

  <label>10</label><br/>

  <label>11</label><br/>

  <label>12</label><br/>

  <label>13</label><br/>

  </div>

  <input type="button" value="getHeight" onclick="getHeight();"/>

 </body>

</html>

前言最近在工作中遇到了一个问题，某个需求需要获取元素的高度，就假定是div元素，但是呢因为div中元素的内容是不确定的，所以并没有给div设置高度，在获取高度时，我们首先会想到3中方法1、div.style.height;我们会发现输出空，这是因为style对象获取的是定义在内联样式中的属性，所以不可行。2、$(div).css("height");我们会发现输出0，很正常因为我们根本没定义hei...

Vue 中获取一个元素的高度可以使用 JavaScript 原生方法或者 Vue 内置的 $refs。使用 JavaScript 原生方法：可以在 mounted 钩子函数中获取到元素，然后使用 offsetHeight 属性获取元素高度。 mounted () { let element = this.$el.querySelector('.element') let heigh...

获取的元素高度包括内容、padding、border，不包括margin，getBoundingClientRect( )方法可以获取元素的位置和大小信息，包括left、right、top、bottom、width、height。获取的元素高度是内容的真实高度，即整个内容在没有滚动条的情况下所占据的高度包括被隐藏的部分。获取的元素高度包括内容、padding，不包括border、margin。获取元素的计算样式，包括高度、宽度。获取元素相对于其父元素顶部的距离。

在Vue中，可以通过使用ref属性给DOM元素添加一个引用，然后通过$refs对象来获取该DOM元素的引用。通过引用可以获取DOM元素的高度。在Vue中，我们经常需要获取DOM元素的高度，以便进行一些自定义的样式或布局操作。下面介绍几种常用的获取DOM元素高度的方法。这是几种常用的在Vue中获取DOM元素高度的方法。根据实际情况选择合适的方法来获取DOM元素的高度，以便进行后续的操作。我们可以利用计算属性来获取DOM元素的高度。有时候，DOM元素的高度可能在Vue实例的更新周期之后才能获取到。

原生js获取元素高度 <div id='container'></div> let dom = document.getElementById('contanier') dom.scrollHeight =>// 获取元素实际高度包括卷曲高度(正文高度) dom.scrollWidth =>// 获取元素实际宽度包括卷曲高度(正文宽度) dom.clientHeight =>// 获取元素可见高度(不含边框) dom.clientWidth => /

87,991

社区成员

224,687

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章