根据文本内容动态改变元素背景色：JavaScript教程-html教程-PHP中文网

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

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

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

核心功能实现

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

1. 获取目标元素集合

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

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

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 直接修改了元素的内联样式。

度加AI

度加AI官网入口，百度官方 AIGC 创作平台，支持 AI 成片、AI 生文、数字人、声音克隆、配音字幕与智能剪辑等在线创作能力。

下载

3. 页面加载时执行

为了确保这个功能在用户访问页面时自动生效，我们需要将上述逻辑封装到一个函数中，并在页面完全加载后调用该函数。window.onload 事件是执行此操作的理想时机。

window.onload = changeBackgroundColor;

当页面上的所有内容（包括图片、脚本等）都加载完毕后，changeBackgroundColor 函数就会被执行。

完整代码示例

将上述所有部分整合，形成一个完整的JavaScript函数：

function changeBackgroundColor() {
    // 获取所有具有指定类名的元素
    const elements = document.getElementsByClassName("disponibilite_mh");

    // 遍历每个元素
    for (let element of elements) {
        // 根据元素的文本内容设置背景色
        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';
        } 
    }
}

// 确保在页面完全加载后执行此函数
window.onload = changeBackgroundColor;

示例HTML结构

为了测试上述JavaScript代码，您可以创建如下的HTML结构：



    <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态背景色示例</title><style>
        .disponibilite_mh {
            padding: 10px;
            margin: 5px;
            border: 1px solid #ccc;
            display: inline-block; /* 使div并排显示，方便观察 */
        }
    </style><h1>商品状态列表</h1>

    <div class="disponibilite_mh">Available</div>
    <div class="disponibilite_mh">Reserved</div>
    <div class="disponibilite_mh">Selled</div>
    <div class="disponibilite_mh">Pending</div> <!-- 测试default情况 -->
    <div class="disponibilite_mh">Available</div>

    <script>
        // 将上述完整的JavaScript代码粘贴到这里
        function changeBackgroundColor() {
            const elements = document.getElementsByClassName("disponibilite_mh");
            for (let element of elements) {
                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';
                } 
            }
        }
        window.onload = changeBackgroundColor;
    </script>

进一步优化与最佳实践

尽管直接操作 element.style 可以实现功能，但在更复杂的项目中，以下最佳实践可以提高代码的可维护性和扩展性：

使用CSS类管理样式： 与其在JavaScript中直接设置 backgroundColor，不如在CSS中定义好不同的状态类，然后通过JavaScript添加或移除这些类。这样可以更好地分离结构（HTML）、表现（CSS）和行为（JavaScript）。

.status-available { background-color: green; }
.status-reserved { background-color: orange; }
.status-selled { background-color: red; }
.status-default { background-color: white; }

JavaScript代码将变为：

switch (element.innerText) {
    case 'Available':
        element.classList.add('status-available');
        break;
    case 'Reserved':
        element.classList.add('status-reserved');
        break;
    // ... 其他状态
    default:
        element.classList.add('status-default');
}

数据驱动的配置： 如果状态和颜色映射关系很多，或者需要从后端动态获取，可以将这些映射关系存储在一个JavaScript对象中，而不是硬编码在 switch 语句里。

const statusColors = {
    'Available': 'green',
    'Reserved': 'orange',
    'Selled': 'red',
    'default': 'white' // 定义一个默认值
};

// 在循环中
const statusText = element.innerText;
element.style.backgroundColor = statusColors[statusText] || statusColors['default'];

考虑性能： 对于页面上数量非常多的元素，document.getElementsByClassName() 的性能通常很好。如果需要频繁地重新评估或更新，可以考虑使用事件委托或更高级的JavaScript框架来优化DOM操作。
可访问性： 纯粹通过颜色来区分状态可能对色盲用户不友好。可以考虑同时添加图标、文本说明或使用ARIA属性来增强可访问性。