如何设置长HTML代码的样式

时间:2017-12-01 05:11:09

标签: html css

我有一个非常长的HTML行,如下所示:

File "ldrmqtt.py", line 65
  print rc_time(pin_to_circuit)
              ^
SyntaxError: invalid syntax

我想为每个字母的部分设置样式。是否有可能针对他们?长度并不总是相同而且可以改变,但<p>ABC , DEFG , HI , JKLMN </p> 将始终将它们分开。

我无法修改HTML以包含类。

1 个答案:

答案 0 :(得分:2)

您可以使用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;
}