如何通过带参数的函数结合模板字符串修改元素颜色？

你的代码里有三个关键问题导致颜色修改失效：

• 模板字符串中给颜色值额外添加了双引号，这会让borderColor的值变成带引号的无效格式（比如"green"），浏览器无法识别
• setTimeout的延迟参数应该是数字类型，你传了字符串'700'，虽然浏览器会自动转换，但规范写法是用数字
• 调用函数时green没有加引号，若未定义名为green的变量，会直接抛出引用错误；即使定义了，也应该明确传入字符串颜色值

修复后的代码 #

function colorize(choice, color) {
    choice.style.transition = 'all 450ms';
    choice.style.borderColor = `${color}`; // 移除多余的双引号
    setTimeout(() => choice.style.borderColor = 'rgba(60, 70, 127, 0.2)', 700); // 把'700'改成数字700
}
colorize(userDomChoice, 'green'); // 给green加上引号

额外说明 #

如果你的green是一个预先定义的颜色变量（比如const green = '#00ff00'），那调用时可以不用加引号，但要确保这个变量确实存在且是有效的颜色值。

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