根据文本内容动态改变元素背景色：JavaScript教程

本教程详细介绍了如何使用javascript，在网页加载时遍历特定html元素（如`p`标签），并根据其内部文本内容动态设置背景颜色。通过示例代码，您将学习如何获取元素集合、判断文本状态并应用相应的样式，从而提升页面内容的视觉表达力。

在网页开发中，根据元素内部的文本内容来动态调整其视觉样式是一种常见的需求，例如用不同颜色表示商品状态（可用、预订、已售）。本教程将详细指导您如何使用纯JavaScript实现这一功能，确保代码在页面加载时对所有符合条件的元素生效。

核心功能实现

实现根据文本内容动态改变元素背景色的功能，主要包含以下几个步骤：获取所有目标元素、遍历元素并检查文本内容、根据内容设置样式，以及确保在页面加载时执行。

1. 获取目标元素集合

首先，我们需要识别并获取所有需要进行背景色调整的HTML元素。通常，这些元素会共享一个特定的CSS类名。我们可以使用 document.getElementsByClassName() 方法来获取一个包含所有具有该类名元素的HTMLCollection。

例如，如果目标元素都带有 disponibilite_mh 类：

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

const elements = document.getElementsByClassName("disponibilite_mh");

登录后复制

这将返回一个类数组对象，其中包含了页面上所有 class="disponibilite_mh" 的元素。

2. 遍历与条件判断

获取到元素集合后，我们需要遍历这个集合，对每个元素执行判断逻辑。对于每个元素，我们将获取其 innerText 属性来获取其包含的文本内容，然后使用条件语句（如 switch 或 if/else if）来根据文本内容设置不同的背景色。

switch 语句在此场景下非常适用，因为它能清晰地处理多个离散的文本状态。

for (let element of elements) { // 使用 for...of 循环遍历 HTMLCollection
    switch (element.innerText) {
        case 'Available':
            element.style.backgroundColor = 'green';
            break;
        case 'Reserved':
            element.style.backgroundColor = 'orange';
            break;
        case 'Selled':
            element.style.backgroundColor = 'red';
            break;
        default:
            element.style.backgroundColor = 'white'; // 默认情况下设置为白色
    }
}

登录后复制

在上述代码中，element.style.backgroundColor 直接修改了元素的内联样式。

标签： css javascript java html 编码 ssl 后端 ai switch win html元素 red