Question

我有一个p，可以显示关于特定鼠标事件的数十种不同文本。可以只用不同的样式显示其中一种文本吗？

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

让我们举一个清晰的例子：

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

是否可以为这样的var提供样式值？

Answer 1

您说您有一个包含多个元素的p标签。因此，js应该是

var p = document.getElementsByTagName("p");

for(var i=0; i<p.length; i++) {
if(p[i].innerHTML == "text huge blue"){
  p[i].style.color = "blue";
  p[i].style.font = "italic bold 20px arial,serif";
}

else
  p[i].style.color = "red";
}

<p>text huge blue</p>
<p>text huge other things</p>

在此代码段中，您有一个由文档中所有带有“ p”标签的元素组成的数组，我认为这是您的情况（否则，很容易编辑此代码以将其应用于您的需求）。如果内容为“文本巨大的蓝色”，则将p的内容变为蓝色和斜体，否则将其变为红色。因此，我为您提供了两个示例以了解两者之间的区别。

Answer 2

您可以在文本更改上添加class，以替换所需的任何文本。我在下面创建了一个简单的示例，在该示例中，单击时更改p标签的文本，并在第3个标签上显示不同的样式。同样，这只是一个简单的示例，诀窍是您可以随时更改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对其进行测试。

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

2 个答案: