用JavaScript打造四宫格

在网页设计中，四宫格布局以其简洁明了、整齐美观的特点，广泛应用于各种场景，如图片展示、导航菜单等。使用JavaScript来打造四宫格，不仅能够实现基本的布局效果，还能赋予其丰富的交互性。

我们需要搭建HTML结构。创建一个包含四个子元素的容器，每个子元素代表四宫格中的一格。例如：

<div id="quad-grid">
  <div class="grid-item">内容1</div>
  <div class="grid-item">内容2</div>
  <div class="grid-item">内容3</div>
  <div class="grid-item">内容4</div>
</div>

接着，使用CSS为四宫格添加基本的样式，设置容器和子元素的尺寸、边框、背景颜色等，让它们初步呈现出四宫格的样子。

#quad-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.grid-item {
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  text-align: center;
  padding: 20px;
}

现在，轮到JavaScript发挥作用了。我们可以使用JavaScript为四宫格添加交互效果。比如，当鼠标悬停在某一格上时，改变其背景颜色。

const gridItems = document.querySelectorAll('.grid-item');
gridItems.forEach(item => {
  item.addEventListener('mouseover', function() {
    this.style.backgroundColor = '#ddd';
  });
  item.addEventListener('mouseout', function() {
    this.style.backgroundColor = '#f9f9f9';
  });
});

上述代码通过querySelectorAll获取所有的四宫格子元素，然后为每个子元素添加鼠标移入和移出事件监听器。当鼠标移入时，将背景颜色改为#ddd，鼠标移出时恢复为原来的颜色。

除了简单的鼠标悬停效果，JavaScript还能实现更复杂的功能。例如，点击某一格时，弹出一个包含详细信息的对话框。

gridItems.forEach(item => {
  item.addEventListener('click', function() {
    const details = "这里是详细信息";
    alert(details);
  });
});

通过这样的方式，我们利用JavaScript成功打造了一个具有交互性的四宫格。无论是简单的样式变化还是复杂的交互功能，JavaScript都为网页设计提供了强大的支持。通过不断探索和实践，我们可以进一步优化四宫格的功能和视觉效果，为用户带来更好的体验。