如何在JavaScript代码中添加多种文本颜色样式？

你当前的代码是给整个div元素设置了统一的蓝色文字，所以里面所有文本都会变成蓝色。要实现不同文本段显示不同颜色，得用HTML标签（比如<span>）分别包裹对应内容，单独设置颜色，再把这段HTML插入到div中。

修改后的代码示例：

let combo = document.getElementById("string_determine");
let div = document.getElementById("mybox");
let string_determine;

switch(combo.options[combo.selectedIndex].text){
    case "blueblue": // 注意去掉多余的转义引号，需匹配实际下拉选项的文本内容
        // 用span分别包裹不同文本，设置各自颜色
        string_determine = '<span style="color: black;">This is black</span>' + 
                           '<span style="color: blue;">This is blue</span>'; 
        div.innerHTML = string_determine; // 用innerHTML插入带样式的HTML内容
        break;
    // 可根据需求添加其他case分支
}

核心要点： #

• 不能直接给div.style.color设置单一颜色，这会让整个div内的文本都继承该颜色。
• 用<span>标签拆分需要单独着色的文本段，通过style属性指定对应颜色。
• 使用div.innerHTML插入包含HTML标签的内容，浏览器才能解析并应用样式。

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