DOM操作无法为Icon应用CSS样式的原因及动态改色方案

我尝试通过DOM动态修改.icon-exclamation图标的颜色，直接操作图标元素时样式不生效；但如果把图标替换成<h6>标签并使用文本“!”，样式就能正常生效。相关代码如下，请问失效原因是什么？如何实现图标的颜色动态修改？

相关代码 #

<div class="indicator">
    <i id="exclamation" class="icon-exclamation"></i>
    <h6 id="pinfo" class="passwordinfo">dupa</h6>
</div>

<script>
var pass = document.getElementById("password");
var pinfo = document.getElementById("pinfo");
var exc = document.getElementById("exclamation");
console.log(exc[0])
pass.addEventListener('input', ()=>{
    if (pass.value.length === 0) {
        pinfo.innerHTML = "Waiting for your password"
    } else if (pass.value.length <=4) {
        pinfo.style.visibility = "visible";
        exc.style.color = "blue";
        exc.style.display = "block";
        pinfo.innerHTML = "Password is weak";
        pinfo.style.color = "#ff0000"
    } else if (pass.value.length >=4 && pass.value.length <8) {
        pinfo.innerHTML = "Password is medium";
        pinfo.style.color = "#ff8000";
    } else {
        pinfo.innerHTML = "Password is strong";
        pinfo.style.color = "#00ff00";
    }
})
</script>

失效原因分析 #

• 字体图标样式优先级冲突：.icon-exclamation这类图标基本都是字体图标（比如Font Awesome或自定义字体图标），本质是通过字体渲染的字符。如果你的CSS中已经用类选择器给图标设置了color，类选择器的优先级会高于JS设置的行内style.color，导致JS的样式被覆盖。
• 代码无效语句：console.log(exc[0])是错误写法，getElementById返回单个元素而非数组，exc[0]会得到undefined，不过这不是颜色失效的核心原因。
• 状态覆盖不完整：在密码长度大于4的分支里，你没有设置图标的颜色和显示状态，导致图标样式未同步更新。

解决方法 #

1. 强制提升行内样式优先级（快速修复） #

用style.setProperty方法添加important修饰，强制覆盖类选择器的样式：

// 替换原有的exc.style.color = "blue";
exc.style.setProperty('color', 'blue', 'important');

2. 改用CSS类切换（推荐方案） #

提前在CSS中定义不同状态的样式类，通过JS添加/移除类来控制图标颜色，彻底避免优先级冲突：

CSS新增样式

.icon-exclamation { 
    color: #999; /* 默认颜色 */
    display: none; /* 默认隐藏 */
}
.icon-weak { color: blue; }
.icon-medium { color: #ff8000; }
.icon-strong { color: #00ff00; }

修改JS逻辑

var pass = document.getElementById("password");
var pinfo = document.getElementById("pinfo");
var exc = document.getElementById("exclamation");

pass.addEventListener('input', ()=>{
    // 先移除所有状态类，避免样式残留
    exc.classList.remove('icon-weak', 'icon-medium', 'icon-strong');
    
    if (pass.value.length === 0) {
        pinfo.innerHTML = "Waiting for your password";
        exc.style.display = 'none';
    } else if (pass.value.length <=4) {
        pinfo.style.visibility = "visible";
        exc.style.display = "block";
        exc.classList.add('icon-weak');
        pinfo.innerHTML = "Password is weak";
        pinfo.style.color = "#ff0000";
    } else if (pass.value.length >=4 && pass.value.length <8) {
        exc.style.display = "block";
        exc.classList.add('icon-medium');
        pinfo.innerHTML = "Password is medium";
        pinfo.style.color = "#ff8000";
    } else {
        exc.style.display = "block";
        exc.classList.add('icon-strong');
        pinfo.innerHTML = "Password is strong";
        pinfo.style.color = "#00ff00";
    }
})

3. 修正代码错误 #

删除console.log(exc[0])，改为console.log(exc)来验证是否正确获取到图标元素。

4. 确认字体图标加载状态 #

在浏览器开发者工具的「网络」面板中检查字体文件是否加载成功，若字体未加载，图标无法正常显示，样式修改也不会生效。

内容的提问来源于stack exchange，提问作者New_stud