两种颜色，一个字符串，一个功能

Two colors in one string with one function?

本文关键字：一个 功能 字符串 颜色 两种      更新时间：2023-09-26

这听起来像是一个很容易解决的问题。诚然，我曾希望能够做到这一点。我想要一根有两种颜色的弦。JS: 

function twoColors(s1,s2) {
    s1.color = "#hexColor1";
    s2.color = "#hexColor2";
    return(s1+s2)
}
HTML中的

(在JS中查找后)

<script>
    document.getElementById("theElementsID").innerHTML = twoColors("one","two");
</script>

然而这不起作用…想法吗?

你需要在HTML中使用一个样式来包装文本。

function twoColors(s1, s2) {
  s1 = "<span style='"color:#eeff00'">" + s1 + "</span>";
  s2 = "<span style='"color:#00eeff'">" + s2 + "</span>";
  return (s1 + s2)
}
document.getElementById("output").innerHTML = twoColors("one", "two");
<div id="output" style="background-color:black;">123</div>

如果有很好的理由不使用css，那么你可以这样做:

function twoColors(s1,s2) {
  var container = document.createElement('div');
  var el1 = document.createElement('span');
      el1.style.color = "#33aa33";
      el1.textContent = s1;
  container.appendChild(el1);
  var el2 = document.createElement('span');
      el2.style.color = "#aa3333";
      el2.textContent = s2;
  container.appendChild(el2)
  return(container)
}
document.getElementById("theElementID").appendChild(twoColors("one","two"));
<div id="theElementID"></div>

相关文章：