javascript - 是否可以在p中更改特定值的样式？

我有一个p，其中的文本在单击按钮时会发生变化，每个按钮根据var的值显示不同的文本，我希望这些文本中的一个具有不同的字体大小。

var language = " "; /* this var changes when another function fires, don't mind this, just know that the var changes and the possible values are 1,2,3 */

function changeText(text1, text2, text3) {
  if (language == 1) {
    document.getElementById('text').innerHTML = text1;
  } else if (language == 2) {
    document.getElementById('text').innerHTML = text2;
  } else if (language == 3) {
    document.getElementById('text').innerHTML = text3;
  } else {
    document.getElementById('text').innerHTML = "Don't think about this";
  }
}
/*yeah, I should be more DRY and not repeat document.getElementById('text') all over*/

button.addEventListener('click', () => changeText('whales', 'snails', 'this is the specific text that needs a different font-size'));
button2.addEventListener('click', () => changeText('bees', 'trees', 'this text3 is ok with the actual font-size'));

#text {
  font-size: 14px;
}

<p id='text'> dinamic text is in here </p>

我希望特定的text3有不同的字体大小，而不是所有的text3。我修改了changeText函数，因此当language==3时，#text的字体大小不同，但这当然适用于所有text3。希望我明白了，谢谢你的帮助。
我检查了类似的问题，但如果我检查了：

else if (language == 3) {
 document.getElementById('text').innerHTML = text3;
 document.getElementById('text').style.fontSize = 10px;

它改变了所有文本3的字体大小。

最佳答案

由于要更改innerHTML（与innerText相反），因此可以在文本中添加html标记。例如。：
JS公司

button.addEventListener('click', () => changeText('whales', 'snails', '<small>this is the specific text that needs a different font-size</small>'));
button2.addEventListener('click', () => changeText('bees', 'trees', 'this text3 is ok with the actual font-size'));

CSS

#text>small {
  font-size: 10px;
}

因为在单击不同的按钮时调用相同的函数，所以它们将具有相同的行为。所以如果你想用编程的方式来实现这个功能，你需要添加一个新的函数或者用奇怪的逻辑来过度复杂已经庞大的函数。
突然冒出来的真正问题是：你为什么想要这种行为？