Javascript 是否可以更改p中特定值的样式？

我有一个p，当点击按钮时，文本会发生变化，每个按钮根据变量的值显示不同的文本，我希望其中一个文本具有不同的字体大小

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'));

#文本{
字体大小：14px；
}

数字文本在这里

我希望特定的text3有不同的字体大小，而不是所有的text3。我修改了函数changeText，因此当language==3时#text的字体大小不同，但这当然适用于所有text3。希望我是清楚的，谢谢你的帮助

我检查了类似的问题，但如果我检查了：

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

它会更改所有文本3的字体大小。

var text=document.getElementById（'text'）；
功能更改文本（文本1、文本2、文本3、按钮）{
//违约行为
text.style.color=“红色”；
如果（语言==1）text.innerHTML=text1；
如果（语言==2）text.innerHTML=text2，则为else；
如果（语言==3）{
text.innerHTML=text3；
//不同的行为
如果（按钮==“按钮1”）
text.style.color=“绿色”；
}
else text.innerHTML=“不要考虑这个”；
}

---

由于您正在更改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'));

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

由于您在单击不同按钮时调用相同的函数，因此它们将具有相同的行为。因此，如果你想通过编程的方式实现这一点，你需要添加一个新的函数，或者用奇怪的逻辑将已经庞大的函数过度复杂化

---

弹出的真正问题是：为什么需要这种行为？

当然，因为样式应用于节点。而不是文本节点。如果您只想对一行文本的一部分进行样式设置，那么将其封装在一个span中，并对span进行样式设置。我不太确定您的要求是什么——我假设您只有一个ID为

#text

的元素？只有该元素将接收

text3

的样式，并且只有当

language

等于

3

时才会接收。该片段当然不起作用，因为它只有js部分。我有两个不同的按钮，当language==3时，它们会显示两个不同的文本，但我只希望第一个按钮中的text3具有不同的样式。有了这个函数，每次使用语言时，文本都是绿色的3@Skalfaro我编辑了它，添加了一个使它发生的参数。谢谢你，我问你是否有一种方法可以做到这一点，而不必编写一个新函数，它会使一切都变得过于复杂。我之所以要这样做，是因为与p中的其他文本相比，文本的长度可能太长，这会打乱提示。如果文本的长度是一个问题，您可能会想看看您的设计是否允许更灵活的解决方案，使较长的文本可以毫无问题地适应。或者，您可以计算字符串的长度，如果字符串太长，可以调整其大小。这假设所有语言中的字符大小相同，但情况可能并非如此。