动态设置元素高度：按百分比调整方法
本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《动态设置元素高度：基于其他元素的百分比》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~
本文探讨了如何使用JavaScript动态地将一个HTML元素的高度设置为另一个元素高度的特定百分比。通过数学转换，我们将heightA = heightB + 5%的关系转换为heightB = heightA * 0.95，并提供了详细的JavaScript实现方法，包括获取计算样式、处理单位以及在DOM加载和窗口尺寸变化时更新高度的注意事项，旨在提供一个健壮的解决方案。
在网页开发中，我们经常需要实现元素之间尺寸的联动，尤其是在响应式设计中。其中一个常见的需求是将一个元素的高度设置为另一个元素高度的某个百分比，例如，让子元素的高度比父元素高度的95%更小，或者反之。虽然CSS在某些情况下可以实现类似效果（如使用Flexbox或Grid布局），但对于需要精确计算和动态调整的场景，JavaScript提供了更灵活和强大的控制能力。
理解高度关系与数学转换
假设我们有两个HTML元素，我们将其高度分别命名为 heightA 和 heightB。如果我们的目标是让 heightA 等于 heightB 加上 heightB 的5%，即 heightA = heightB + 0.05 * heightB，这可以简化为 heightA = 1.05 * heightB。
然而，如果问题是“将元素B的高度设置为元素A的高度减去A的5%”，即 heightB = heightA - 0.05 * heightA，那么关系将是 heightB = 0.95 * heightA。这通常意味着元素A需要有一个预定义的高度，以便元素B可以基于此进行计算。在实际应用中，通常会有一个“基准”元素（例如，父容器或兄弟元素）具有明确的高度，而其他元素的高度则依赖于它。
使用JavaScript实现动态高度设置
为了实现这种动态高度设置，我们需要以下几个步骤：
- 获取目标元素： 选中需要操作的HTML元素。
- 获取基准高度： 获取基准元素当前的计算高度。
- 计算目标高度： 根据预设的百分比关系计算出目标元素的新高度。
- 应用新高度： 将计算出的高度值应用到目标元素的样式上。
以下是一个具体的JavaScript实现示例，它假设页面中有多个.a类元素，每个.a元素内部有一个.b类元素，目标是将.b的高度设置为其对应.a元素高度的95%。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态设置元素高度</title>
<style>
body {
font-family: sans-serif;
margin: 20px;
}
.container {
display: flex;
gap: 20px;
}
.a {
width: 150px;
border: 2px solid blue;
margin-bottom: 10px;
/* 示例：设置一个明确的高度，供内部元素参考 */
height: 200px; /* 假设父元素A有明确的高度 */
display: flex; /* 让内部B元素可以填充 */
flex-direction: column;
justify-content: center;
align-items: center;
}
.b {
width: 80%;
background-color: lightgreen;
border: 1px dashed gray;
box-sizing: border-box; /* 确保padding和border不影响计算出的高度 */
display: flex;
justify-content: center;
align-items: center;
color: #333;
}
/* 另一个示例，A元素高度不固定 */
.a.dynamic {
height: auto; /* 高度自适应内容或由其他因素决定 */
min-height: 100px;
max-height: 300px;
background-color: #f0f0f0;
padding: 10px;
}
.a.dynamic .b {
background-color: lightcoral;
}
</style>
</head>
<body>
<h1>动态设置元素高度教程</h1>
<p>以下示例展示了如何将内部元素（类名为<code>.b</code>）的高度设置为其外部父元素（类名为<code>.a</code>）高度的95%。</p>
<div class="container">
<div class="a">
<div class="b">B (固定A)</div>
</div>
<div class="a">
<div class="b">B (固定A)</div>
</div>
<div class="a dynamic">
<p>这是一个动态高度的A元素，它的内容可能会变化，导致A的高度变化。</p>
<div class="b">B (动态A)</div>
</div>
</div>
<script>
function setRelativeHeights() {
// 选中所有外部的div（类名为"a"）
const divsA = document.querySelectorAll('.a');
// 选中所有内部的div（类名为"b"）
const divsB = document.querySelectorAll('.b');
divsA.forEach((divA, i) => {
// 确保对应的divB存在
if (divsB[i]) {
// 获取divA的计算高度。getComputedStyle是获取元素最终渲染样式最可靠的方法。
// parseFloat用于将"200px"这样的字符串转换为数字200。
const computedHeightA = parseFloat(window.getComputedStyle(divA).height);
// 检查是否成功获取到有效高度
if (!isNaN(computedHeightA) && computedHeightA > 0) {
// 根据 heightB = 0.95 * heightA 的关系计算新高度
const newHeightB = computedHeightA * 0.95;
// 将计算出的高度应用到divB的style属性上，并加上单位"px"
divsB[i].style.height = `${newHeightB}px`;
console.log(`Div A[${i}] height: ${computedHeightA}px, Div B[${i}] set to: ${newHeightB}px`);
} else {
console.warn(`无法获取 divA[${i}] 的有效高度，或高度为0。`);
}
}
});
}
// 在DOM内容完全加载后执行脚本
document.addEventListener('DOMContentLoaded', setRelativeHeights);
// 窗口尺寸变化时重新计算和设置高度，以应对响应式布局
window.addEventListener('resize', setRelativeHeights);
</script>
</body>
</html>代码解析与注意事项
document.querySelectorAll('.a') 和 document.querySelectorAll('.b'):
- 这两个方法用于选择所有匹配指定CSS选择器的元素，并返回一个NodeList（类似于数组）。
- 通过遍历 divsA，我们可以同时操作对应的 divsB。
window.getComputedStyle(divA).height:
- 这是获取元素最终计算出的样式属性（包括由CSS规则、内联样式和浏览器默认样式共同作用的结果）最可靠的方法。它返回一个包含单位的字符串（例如 "200px"）。
- 直接使用 divA.style.height 只能获取元素内联样式中设置的高度，如果高度是通过CSS文件或
