使用 CSS 和 JavaScript 实现点击按钮逐步显示 HTML 元素-js教程-PHP中文网

使用 CSS 和 JavaScript 实现点击按钮逐步显示 HTML 元素

霞舞

发布： 2025-08-19 19:42:37

原创

558人浏览过

使用 css 和 javascript 实现点击按钮逐步显示 html 元素

本文将介绍如何使用纯 CSS 和 JavaScript 实现一个“加载更多”的功能，点击按钮后，页面上隐藏的元素会分批次地显示出来。通过控制元素的 display 属性，我们可以实现元素的隐藏和显示。同时，我们将更新页面上的计数器，显示当前已显示的元素数量。

HTML 结构

首先，我们需要定义 HTML 结构。创建一个容器 container，包含一个 items-container 用于放置需要动态显示的元素，一个显示当前元素数量的段落 p，以及一个“加载更多”按钮。

<div class="container">
  <div class="items-container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <p></p>
  <button>
    Load more
  </button>
</div>

登录后复制

CSS 样式

接下来，定义 CSS 样式，设置容器的基本样式，以及每个 item 的样式。默认情况下，我们将使用 Flexbox 布局，并设置 item 的宽度和背景颜色。

.container {
  padding: 16px;
}

.items-container {
  flex-direction: row;
  display: flex;
  gap: 16px;
  flex-wrap: wrap; /* 允许项目换行 */
}

.item {
  flex: 0 0 auto;
  width: 23%; /* 调整宽度，确保每行显示 4 个元素 */
  background-color: lightblue;
  height: 320px;
}

登录后复制

注意：这里使用了 flex-wrap: wrap; 允许元素换行，并且将 item 的宽度调整为 23%，留出一些间隙，确保每行可以显示 4 个元素。

立即学习“Java免费学习笔记（深入）”；

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

JavaScript 逻辑

现在，我们编写 JavaScript 代码来实现点击按钮后逐步显示元素的功能。

const items = Array.from(document.querySelectorAll('.item')); // 获取所有 item 元素
let count = 4; // 初始显示 4 个元素

function updateCount() {
  // 更新计数器，显示当前已显示的元素数量
  document.querySelector('p').innerHTML = 'Showing ' + count + ' of ' + items.length;
}

function updateItems() {
  // 根据 count 值，更新元素的 display 属性
  for (let index = 0; index < count; index++) {
    items[index].style.display = ''; // 显示元素
  }

  for (let index = count; index < items.length; index++) {
    items[index].style.display = 'none'; // 隐藏元素
  }

  updateCount(); // 更新计数器
}

updateItems(); // 初始化显示

document.querySelector('button').addEventListener('click', () => {
  // 按钮点击事件监听器
  count += 4; // 每次增加显示 4 个元素
  count = count > items.length ? items.length : count; // 确保 count 不超过元素总数
  updateItems(); // 更新元素显示
});

登录后复制

代码解释：

获取元素： document.querySelectorAll('.item') 获取所有 class 为 item 的元素，并将其转换为数组 items。
初始计数器： count 变量表示当前显示的元素数量，初始值为 4。
updateCount() 函数： 更新页面上的计数器，显示当前已显示的元素数量。
updateItems() 函数： 遍历所有 item 元素，根据 count 的值，设置元素的 display 属性。如果索引小于 count，则显示元素；否则，隐藏元素。
初始化显示： 在页面加载时，调用 updateItems() 函数，显示初始的 4 个元素。
按钮点击事件： 为“加载更多”按钮添加点击事件监听器。每次点击按钮，count 的值增加 4。如果 count 的值超过了元素总数，则将其设置为元素总数。然后，调用 updateItems() 函数，更新元素的显示状态。