html - 如何设置长HTML代码的样式

我的HTML行很长，如下所示：

<p>ABC , DEFG , HI , JKLMN </p>

我想为字母的每个部分设置样式。有可能针对他们吗？长度并不总是相同，可以改变，但是,总是将它们分开。

我无法修改HTML以包含类。

最佳答案

您可以使用javascript或jquery进行相同的操作。

这是工作中的fiddle

的HTML

<p>ABC , DEFG , HI , JKLMN </p>

Javscript

var p = document.getElementsByTagName('p');
console.log(p[0].innerHTML);
var texts = p[0].innerHTML.split(',');
console.log(texts);
for (var i = 0; i < texts.length; i++) {
  var className;
  if (i%2 === 0) {
    className = 'red';
  } else {
    className = 'blue';
  }
  texts[i] = texts[i].replace(texts[i], '<span class="' + className + '">' + texts[i] + '</span>');
}
console.log(texts);
console.log(texts.join(", "));
p[0].innerHTML = texts.join(", ");

的CSS

.red {
  color: red;
}
.blue {
  color: blue;
}

关于html - 如何设置长HTML代码的样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47587007/