JavaScript技术问题：无法为style变量赋值，求正确实现方式

你的核心问题是对style变量的本质理解错了——原代码里的style是字符串类型，不是对象，所以不能用style.color()这种对象方法的方式赋值。另外你的代码还存在变量作用域、函数参数传递、函数调用逻辑的问题，下面一步步修正：

1. 修正consoleStyler函数 #

原函数只是拼接了样式字符串，但没有实际输出日志，也没返回样式值。改成直接输出带样式的日志：

function consoleStyler(color, background, fontSize, txt) {
  // 拼接控制台所需的CSS样式字符串
  const style = `color: ${color}; background: ${background}; font-size: ${fontSize};`;
  // 输出带样式的控制台消息
  console.log(`%c${txt}`, style);
}

2. 修正celebrateStyler函数 #

原函数else分支里的message和style未定义，补充默认输出逻辑避免报错：

function celebrateStyler(reason) {
  const fontStyle = "color: tomato; font-size: 50px";
  if (reason === "birthday") {
    console.log(`%cHappy birthday`, fontStyle);
  } else if (reason === "champions") {
    console.log(`%cCongrats on the title!`, fontStyle);
  } else {
    // 默认庆祝消息
    console.log(`%cCheers!`, fontStyle);
  }
}

3. 正确调用函数（任务3修正） #

你之前尝试的style.color()是错误写法，直接给consoleStyler传递参数即可：

// 直接传入样式参数和文本，调用控制台样式函数
consoleStyler('#1d5c63', '#ede6db', '40px', 'Congrats!');
// 调用生日庆祝函数
celebrateStyler("birthday");

4. 修正styleAndCelebrate函数及调用（任务4修正） #

原函数未定义参数，调用方式也错误，调整为接收参数后传递给对应函数：

function styleAndCelebrate(color, background, fontSize, txt, reason) {
  consoleStyler(color, background, fontSize, txt);
  celebrateStyler(reason);
}

// 正确调用：依次传入样式参数、文本、庆祝类型
styleAndCelebrate('ef7c8e','fae8e0','30px','You made it!', "champions");

关键注意点 #

• 控制台%c语法需要搭配完整的CSS样式字符串使用，不是对象，所以要通过字符串拼接生成样式。
• 函数调用时必须明确传递参数，不能使用未定义的变量。
• 函数内部定义的变量（比如原consoleStyler里的style）属于局部变量，外部无法直接访问。

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