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

在网页开发中，根据元素内部的文本内容来动态调整其视觉样式是一种常见的需求，例如用不同颜色表示商品状态（可用、预订、已售）。本教程将详细指导您如何使用纯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 直接修改了元素的内联样式。

Remover

几秒钟去除图中不需要的元素

304

查看详情

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结构：

    
    
    
    



    
商品状态列表

    
Available
    
Reserved
    
Selled
    
Pending
 
    
Available

    <script>
        // 将上述完整的JavaScript代码粘贴到这里
        function changeBackgroundColor() {
            const elements = document.getElementsByClassName(&quot;disponibilite_mh&quot;);
            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 可以实现功能，但在更复杂的项目中，以下最佳实践可以提高代码的可维护性和扩展性：

1. 使用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');
   }

   登录后复制

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

   const statusColors = {
       'Available': 'green',
       'Reserved': 'orange',
       'Selled': 'red',
       'default': 'white' // 定义一个默认值
   };
   
   // 在循环中
   const statusText = element.innerText;
   element.style.backgroundColor = statusColors[statusText] || statusColors['default'];

   登录后复制

3. 考虑性能： 对于页面上数量非常多的元素，document.getElementsByClassName() 的性能通常很好。如果需要频繁地重新评估或更新，可以考虑使用事件委托或更高级的JavaScript框架来优化DOM操作。

4. 可访问性： 纯粹通过颜色来区分状态可能对色盲用户不友好。可以考虑同时添加图标、文本说明或使用ARIA属性来增强可访问性。

总结

通过本教程，您已经掌握了如何使用JavaScript在页面加载时，根据特定HTML元素的文本内容动态改变其背景色。这个技术在显示各种状态信息时非常实用。通过采用CSS类管理和数据驱动的配置等最佳实践，您可以构建出更健壮、更易于维护和扩展的网页应用。

以上就是根据文本内容动态改变元素背景色：JavaScript教程的详细内容，更多请关注php中文网其它相关文章！