动态地将元素的高度更改为另一个
您可以通过使用CSS的height和max-height属性以及JavaScript来实现动态更改元素高度的功能。您需要为每个元素设置一个初始高度，并为其添加一个JavaScript事件监听器，以便在用户滚动页面时动态更改高度。以下是实现此功能的步骤：
- 为每个元素设置一个初始高度。
- 使用JavaScript事件监听器监听页面滚动事件。
- 在事件监听器中，动态更改每个元素的高度。
- 使用CSS的
height和max-height属性来设置元素的高度。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Element Height</title>
<style>
.container {
height: 1000px;
width: 100%;
overflow: hidden;
}
.element {
height: 50px;
width: 100%;
background-color: blue;
display: inline-block;
}
</style>
<script>
window.addEventListener('scroll', function() {
var container = document.querySelector('.container');
var elements = container.querySelectorAll('.element');
var windowScrollTop = window.scrollY;
var windowHeight = window.innerHeight;
var elementHeight = 50;
var elementMaxHeight = 100;
var elementsHeight = 0;
for (var i = 0; i < elements.length; i++) {
elementsHeight += elements[i].offsetHeight;
}
if (windowScrollTop > elementsHeight) {
for (var i = 0; i < elements.length; i++) {
elements[i].style.height = elementMaxHeight + 'px';
}
} else {
for (var i = 0; i < elements.length; i++) {
elements[i].style.height = elementsHeight + 'px';
}
}
});
</script>
</head>
<body>
<div class="container">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
</body>
</html>在此示例中，我们使用window.addEventListener('scroll', function() {...})监听页面滚动事件。然后，我们获取容器的querySelector('.container')元素，并使用querySelectorAll('.element')获取所有元素。我们使用window.scrollY获取当前滚动位置，window.innerHeight获取窗口高度，element.offsetHeight获取元素高度。然后，我们使用一个循环来获取每个元素的高度，并将它们相加，以计算出所有元素的总高度。如果当前滚动位置大于元素总高度，则将所有元素的高度设置为它们的最大高度。否则，将所有元素的高度设置为它们的总高度。
请注意，此示例仅适用于具有固定高度的元素。如果您需要动态更改高度，则需要使用JavaScript来计算元素的高度，并将其设置为元素的高度。
相关·内容
2回答
我有一个元素列表，每个元素都有一个id，等于它在这个列表中的顺序。现在，我通过拖动它们来改变这些元素的顺序。我有以下两个问题：
我希望动态地将这些元素的I更改为它们在列表中的顺序。例如，假设有四个元素，当第一个元素
浏览 0提问于2014-12-13得票数 2
回答已采纳
你在购物网站上看到的典型的抢占现象，比如亚马逊。
我试图在后台插入from JavaScript，使用jQuery动态地设置显示在这些闪存上的文本的填充。问题是，我需要获得某些元素的高度，当我使用.height()值对给定的元素使用jQuery时，它返回零，如果飞出部分是隐藏的(display:none)。如果我取消隐藏“飞出”部分，则该元素的高度</em
浏览 5提问于2014-04-28得票数 1
回答已采纳
我试图做以下工作:单击一个元素时，打开另一个元素。我需要计算我刚打开的那个元素的高度。 </div>
<div *ngI
浏览 6提问于2017-11-16得票数 2
回答已采纳
我有一个并排放着两个浮动div的div。我希望这两个浮动div有一个1px solid #e7e7e7;边框来分隔它们。我曾尝试将border-right: ...放在第一个子div上，但是当第二个div更高时，边框不会延伸到整个高度(它停留在局部高度)。两个div中的内容都是动态的，因此需要调整到父div的高度，或者采用其自身与其同级之间的最大高度。
有什么简单的方法可以做到这一点吗？
浏览 4提问于2012-09-03得票数 0
1回答
我希望沿着容器的底部动态地对齐以下两个元素，以便它们占据相反的角落。类似于Stackoverflow Logo和Ask Question的底部对齐方式，但它们位于容器的相反角落。您可以在此处查看JFiddle测试用例：更有趣的是，我更希望在不向right元素添加固定的边距空间的情况下工作。这样，如果left元素的高度增加，对齐方式<e
浏览 3提问于2013-06-04得票数 2
在这种情况下，有一个元素的位置:固定，并且它的顶部(Css)取决于另一个元素的高度，在控制器中获取该元素的高度的最佳实践是什么？
或者我们如何才能动态地做到这一点？
浏览 19提问于2016-08-10得票数 0
我很难正确地表达这个问题，但我希望在固定高度的容器中有两个div共享相同的高度。所以#container元素会有一个固定的高度，比如500px；# but和# grow元素可以在它们的生命周期中变得更高更小，但永远不能超过500px。如果两个内部元素开始重叠，它们应该达到最大高度，并允许用户使用滚动条。我附上了一张图片来澄清一些事情：和一些示例(非工作) CSS，它们概念性地显示了我想要
浏览 0提问于2012-12-05得票数 1
我有一个3d派对库(完整日历)，它根据一些内部计算动态地分配元素的高度，以便在任何视图中看起来都很好看：然而，并不是所有的元素都是这样，有些元素的高度是固定的我不想改变3d派对库的代码，我在想，是否可以用css将一个元素的样式“应用”到另一个元素</
浏览 2提问于2016-05-04得票数 0
回答已采纳
有没有办法在PDFMake中动态检查剩余的页面高度？当动态创建页面时，我希望能够检查剩余的可用页面高度，将其与元素高度进行比较，这样页面上的最后一个元素(例如图像或长文本区域内容)就不会被剪切，而是被转移到另一个页面。不知道如何动态地做它。
浏览 0提问于2016-06-05得票数 7
1回答
当没有在"YearFrom“中选择任何内容时，"YearTo”框看起来有点像这样：然而，其功能是，一旦选择了"YearFrom“，"YearTo”字段仅提供一年后可用的内容。从本质上讲，我们最终得到的HTML如下：<option value="">Any</option>
<option value="1950" disabled="disabled""2012&qu
浏览 2提问于2013-06-11得票数 0
我不知道每个图像的高度，因为它是动态变化的，但它们都有相同的宽度。我希望post结构看起来像这样：
display: flex; max-width: 100%;
max-height:
浏览 3提问于2019-11-18得票数 0
有没有办法动态地改变从html元素传递给javascript函数的参数？</a>
如何将'myParam‘更改为另一个参数，比如'myParam2'？我可以使用javascript或jquery来回答问题。为了简单起见，请随意假设我可以通过document.getElementById('myElement')或其他方法找到此元素。
浏览 1提问于2013-07-01得票数 2
回答已采纳
下面是一个包含具有多个tbody元素的表元素的示例
<tbody class="tbody1"> <td>Eka</td>}
background-color: blue; background-color: green;最终的</em
浏览 4提问于2017-12-30得票数 2
1回答
我有一个基本的UIViewController和一个UILabel，我想在运行时动态地填充它。我希望围绕UILabel的元素在UILabel展开时移动。我还添加了一些约束，应该允许这样做，但是我无法测试它，因为我的行没有像它们应该的那样包装在标签上。我已经将属性检查器中的行数设置为0，并将换行模式更改为Word Wrap。但是，UILabel框不会在高度上展开以表示文本的数量。我该怎么安排呢？谢谢你
浏览 1提问于2015-01-05得票数 0
回答已采纳
3回答
当单击另一个元素时，我试图影响对元素高度的更改。为了来回切换更改，我使用了一个if and语句。bnr.style.height = "600px") { bnr.style.height = "250px";};
第一条语句工作，将元素高度更改为600 if，但是第二条语句不能工作，如果再次单击，元素</
浏览 6提问于2016-01-21得票数 0
回答已采纳
是否可以编程访问Div的滚动条句柄并更改其大小？我正在尝试实现一种延迟分页机制，其中div的内容将在滚动页上更新，但我希望滚动条上的句柄显示最终大小。也就是说，如果div中只有10个元素，那么句柄将相当大，如果有1000，则句柄将尽可能小，即使用户尚未加载所有1000个元素。谢谢!
浏览 3提问于2010-01-28得票数 1
回答已采纳
1回答
很直接的问题，我希望。是否有一种方法使用角度动画语法来动画元素上的任何高度或位置变化？例如，如果一个DOM元素被删除，导致另一个元素向上移动，那么在不需要设置状态变量的情况下，是否可以动态地进行移位？或者类似的状态。
浏览 0提问于2017-10-27得票数 8
回答已采纳
我希望.container的高度被动态地设置为<body>的宽度，它的高度被设置为<body>的宽度，并且当窗口被调整大小时它应该改变。我想要这样做，因为我试图通过旋转`.container‘-90度和它的内容90度a la ，使CSS只能水平滚动页面。容器当前具有100%的高度和宽度，但是一旦它通过CSS旋转，它将保留其继承的维度，并且不会扩展到浏览器窗口大小，我认为这是逻
浏览 3提问于2013-07-21得票数 1
回答已采纳
1回答
我正在努力构建Flutter中的一小部分。我不想使用扩展，因为我动态地使用高度。我在SingleChildScrollView中使
浏览 3提问于2020-11-24得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
