是否可以在ap中更改特定值的样式？

Question

我有一个文本，当点击按钮时会发生变化，每个按钮根据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具有不同的font-size而不是text3。我修改了函数changeText，所以当language == 3时，＃text的字体大小不同，但当然这适用于所有text3。希望我很清楚，谢谢你的帮助。我检查了类似的问题，但如果我这样做：else if (language == 3) { document.getElementById('text').innerHTML = text3; document.getElementById('text').style.fontSize = 10px;它会改变所有text3的字体大小。

Answer 1

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

}

由于您在单击不同按钮时调用相同的功能，因此它们将具有相同的行为。因此，如果您想以编程方式执行此操作，则需要添加新函数或使用奇怪的逻辑使已经庞大的函数过度复杂化。

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

Answer 2

var text = document.getElementById('text');

    function changeText(text1, text2, text3, button) {

      // default behaviour

      text.style.color = "red";

      if (language == 1) text.innerHTML = text1;

          else if (language == 2) text.innerHTML = text2;

          else if (language == 3){ 

              text.innerHTML = text3;

              // different behaviour

              if(button == "button1")

                  text.style.color = "green";

          }

      else text.innerHTML = "Don't think about this";

    }

<button onclick="changeText('hello','banana','wow','button1');" id="button1">

<button onclick="changeText('vewewve','vdsvs','dgsag','button2');" id="button2">

每次单击按钮且语言不是3时，此代码将默认设置文本。