时间戳

首页 > 解决方案 > 如何使用 JQuery 和 JavaScript 动态获取 div 的长度？

javascript - 如何使用 JQuery 和 JavaScript 动态获取 div 的长度？

问题描述

我正在使用 AngularJS 开发一个 Web 应用程序。我发现自己的情况是，我有一个必须动态地加长和缩短的条（用我创建的 CSS 线） 。我知道 JQuery 脚本足以做到这一点。例如，如果我的 css 是这样的：

.my_line{
    display:block;
    width:2px;
    background: #FFAD0D;
    height: 200px; /*This is the part that needs to dynamically change*/
  }

我可以在控制器中my_line简单地调整（类）行的大小：

$(".my_line").css("height", someExpression*100 + 'px');

问题是，我想根据另一个 div 元素（或者，一般来说，我选择的任何 HTML 元素）的大小来动态调整行的大小。我不知道如何（在运行时）获取某个页面元素的高度大小。只有这样，我才能创建一条随着 div（或其他元素）大小的变化而动态延长或缩短的线条！你怎么做到这一点？所以我会避免编写硬编码的措施，但我想确保它们随着页面上其他元素的尺寸变化而变化

标签： javascripthtmljquerycss

解决方案

我希望这会有所帮助：

$(".my_line").css("height", $("#referenceElement").height()*5 + 'px');
.my_line{
  display:inline-block;
  width:2px;
  background: #FFAD0D;
}
#referenceElement {
  display:inline-block;
  background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="my_line"></div>

<div id="referenceElement">Hi, I'm 5 time smaller than the orange line!</div>

推荐阅读