javascript - 如何在该 span 标签内输出变量(位于 JavaScript 内但 HTML 上下文内)

Question

function calculateDisplay () {
    var province = document.forms["calculateForm"]["province"].value;
...
...
document.getElementById("secondHeader").innerHTML = "Canada | " + province + " | 2017 Tables";

return false;
}

如何格式化以将变量省份显示为颜色:黑色(通常第二个标题 id 为浅灰色)

谢谢!

Answer 1

请告诉我这是否是您正在寻找的内容。

function calculateDisplay() {
  var province = document.forms["calculateForm"]["province"].value;
  document.getElementById("secondHeader").innerHTML = "Canada | <span class=\"province-color\">" + province + "</span> | 2017 Tables";
  return false;
}

calculateDisplay();

<style type="text/css">
  .province-color {
    color: #000;
  }
</style>
<span id="secondHeader" style="color:green;"></span>
<form id="calculateForm">
  <input type="text" name="province" value="Alberta" />
</form>
<button onClick="calculateDisplay();">Re-calc</button>