javascript - 是否可以将样式更改应用于对象的特定值？

Question

我有一个 p 显示了关于特定鼠标事件的几十个不同的文本。是否可以仅以不同的样式显示其中一个文本？

我创建了一个更改 p.style.attributes 的函数，但每次 p 中的文本更改时都必须触发此函数，所以我想问是否有更流畅的方法来执行此操作。可以为值赋予样式吗？

让我们举个例子:

var text32 = "this text should be in blue and huge"

是否可以像那样为 var 赋予样式值？

Answer 1

您可以添加 class on text change on 任何您想要的文本。我在下面创建了一个简单的例子，我在点击时更改了 p 标签的文本，并在第三个标签上显示了不同的样式。同样，这只是一个简单的示例，诀窍是您可以随时更改 Class。

请参阅下面的代码段:

var pTag = document.getElementById("pTag");
var currentIndex = 0;

var pText = ["This is Text 1", "This is Text 2", "This is Text 3", "This is Text 4", "This is Text 5"];
var pBold = [false, false, true, false, false];


pTag.addEventListener("click", function(){
	currentIndex++;
	
  if(currentIndex >= pText.length)
  	currentIndex = 0;
    
  pTag.innerHTML = pText[currentIndex];
  
  if(pBold[currentIndex])
    pTag.classList.add("redBold");
  else
  	pTag.classList.remove("redBold");
})

p{
  cursor: pointer;
  user-select:none;
}
.redBold{
    color:red;
    font-weight: bold;
}

span{
  font-style: italic;
}

<p id="pTag">Click Me!!!!!!</p>

<span>On click of Above p ("Click Me!!!!!"), it will change the text. When the text will be 'This is Text 3', it should be in Red and Bold.</span>

可以测试一下here还有。