JavaScript修改Font Awesome温度计图标颜色失效及代码异常问题

一、图标颜色修改无效的原因与修复 #

• 语法错误：原代码中temp.style.Color使用了大写C，JavaScript中DOM样式属性为驼峰式，正确写法是color（小写）
• 样式丢失：每次通过innerHTML替换<i>标签时，新创建的元素不会继承之前设置的行内样式，导致颜色重置
• 修复方案：
  • 方案1：直接在<i>标签内添加style属性指定颜色
  • 方案2：定义CSS类，给需要变色的图标添加类名（更易维护）

二、函数顶部加变量后代码终止的排查 #

• 核心原因：语法错误或变量冲突
  • 检查新变量名是否与现有变量（如temp、heading）重名
  • 确认变量声明语句是否完整（比如遗漏分号、赋值逻辑错误）
  • 打开浏览器控制台（F12→Console）查看具体报错信息，这是最快的定位方式

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
      <title>Document</title>
      <style>
        *{
            padding: 0;
            margin: 0;
            background-color: black;
            color: white;
        }

        .container{
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
        }
        /* 自定义图标颜色类 */
        .temp-highlight {
            color: #d63031;
        }
      </style>
</head>
<body>
    <div class="container">
        <h1 class="heading">I am <br> Thermometer <span id="icon"></span></h1>
    </div>

    <script>
         // getElementsByClassName返回HTMLCollection，需取第一个元素
         const heading = document.getElementsByClassName("heading")[0];
         heading.style.color = "red";

        const thermometer = () => {
            let temp = document.getElementById("icon");

            temp.innerHTML = '<i class="fa-sharp fa-solid fa-temperature-empty"></i>';
            
            setTimeout(() => {
                // 给图标添加颜色类
                temp.innerHTML = '<i class="fa-sharp fa-solid fa-temperature-quarter temp-highlight"></i>';
            }, 1000);
            setTimeout(() => {
                temp.innerHTML = '<i class="fa-sharp fa-solid fa-temperature-half"></i>';
            }, 2000);
            setTimeout(() => {
                temp.innerHTML = '<i class="fa-sharp fa-solid fa-temperature-three-quarters"></i>';
            }, 3000);
            setTimeout(() => {
                temp.innerHTML = '<i class="fa-sharp fa-solid fa-temperature-full temp-highlight"></i>';
            }, 4000);
        }

        thermometer();
        setInterval(thermometer, 5000);
    </script>

<script src="https://kit.fontawesome.com/8c672f3d7e.js" crossorigin="anonymous"></script>
   
</body>
</html>

关键修改点说明 #

1. 修复heading元素获取：getElementsByClassName返回元素集合，必须通过[0]获取具体DOM元素才能设置样式
2. 用CSS类控制图标颜色：避免每次替换元素后样式丢失，同时便于统一修改颜色
3. 移除无效的行内样式设置：改为直接在HTML标签中绑定样式类，逻辑更清晰

内容的提问来源于stack exchange，提问作者dev.muhammad