如何为JavaScript对象属性添加样式？报错：styleFragment.style未定义

你报错的核心原因很明确：styleFragment是从对象里取出的字符串（值为"red roof"），字符串本身没有style属性——只有DOM元素才有style对象用来控制样式。

要给文本中的特定部分添加颜色，你需要把这部分内容包装成一个DOM元素（比如<span>），再给这个元素设置样式，最后插入到页面的<p>标签里。

方法一：DOM元素创建法（更安全，适合处理用户输入内容） #

const houseForSale = {
    material: "brick",
    size: "4 bedrooms",
    condition: "excellent",
    characteristic: "red roof"
}

const message = document.querySelector("#demo");

// 创建span元素承载需要变色的文本
const styledCharacteristic = document.createElement('span');
styledCharacteristic.textContent = houseForSale.characteristic;
styledCharacteristic.style.color = "red";

// 组装内容并插入到目标元素
message.textContent = "The house has a ";
message.appendChild(styledCharacteristic);
message.append(".");

方法二：innerHTML模板字符串法（更简洁） #

如果characteristic的内容是你自己控制的（无用户输入风险），可以直接用模板字符串拼接带样式的HTML：

const houseForSale = {
    material: "brick",
    size: "4 bedrooms",
    condition: "excellent",
    characteristic: "red roof"
}

const message = document.querySelector("#demo");
message.innerHTML = `The house has a <span style="color: red">${houseForSale.characteristic}</span>.`;

两种方法最终都会在页面上显示带红色"red roof"的文本，不会再出现之前的报错。

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