在网页设计中，让两个或多个div元素保持等高是非常常见的需求，这有助于保持页面布局的一致性和美观性。在本教程中，我们将探讨如何使用JavaScript（JS）来实现两个div元素的高度同步，以确保它们始终具有相同的高度。这个主题关联的标签是“JS特效-表格图层”，暗示我们可能在处理一种类似表格或分块布局的情况。
我们需要理解基本的HTML和CSS结构。通常，我们会为每个div设置一个类或者ID，以便于在JavaScript中进行选择和操作。例如：
```html
<div class="equal-height-div one">内容1</div>
<div class="equal-height-div two">内容2</div>
```
在CSS中，我们可以为这些div设置基本样式，但初始情况下它们可能会有不同的高度，因为内容长度不一：
```css
.equal-height-div {
display: inline-block; /* 或者 flex、grid 等布局方式 */
width: 50%; /* 根据需要调整宽度 */
box-sizing: border-box;
padding: 10px; /* 添加内边距 */
}
```
接下来，我们使用JavaScript来实现等高效果。这里可以采用两种主要方法：一种是事件监听，当窗口大小改变时更新div的高度；另一种是在页面加载完成后一次性设置高度。
**方法一：窗口大小改变事件监听**
```javascript
window.addEventListener('resize', function() {
var divs = document.querySelectorAll('.equal-height-div');
var maxHeight = 0;
divs.forEach(function(div) {
if (div.offsetHeight > maxHeight) {
maxHeight = div.offsetHeight;
}
});
divs.forEach(function(div) {
div.style.height = maxHeight + 'px';
});
});
```
**方法二：页面加载完成后的设置**
```javascript
document.addEventListener('DOMContentLoaded', function() {
var divs = document.querySelectorAll('.equal-height-div');
var maxHeight = 0;
divs.forEach(function(div) {
if (div.offsetHeight > maxHeight) {
maxHeight = div.offsetHeight;
}
});
divs.forEach(function(div) {
div.style.height = maxHeight + 'px';
});
});
```
这两种方法都通过遍历所有div元素，找到最高的div高度，然后将这个高度应用到所有div上，从而达到等高的效果。如果你的项目中使用了现代的前端框架，如React或Vue，还可以使用生命周期钩子或组件间的通信来实现相同的目标。
在实际应用中，考虑到性能优化，我们可以在`resize`事件监听中添加防抖(debounce)或节流(throttle)函数，以减少不必要的计算。此外，如果使用了CSS Grid或Flexbox布局，有时候可以通过纯CSS解决等高问题，无需JavaScript介入。
通过JavaScript实现两个div等高是一种常见且实用的技术，它能够帮助我们在各种屏幕尺寸和内容变化下保持良好的页面布局。结合适当的HTML和CSS，我们可以创建出响应式且美观的网页。
30.rar （1个子文件） 
30 
index.html 1KB
