HTML正文背景具有相同颜色时如何更改文本颜色答案

【问题标题】：How to change text color when HTML body background has the same colorHTML正文背景具有相同颜色时如何更改文本颜色
【发布时间】：2022-09-27 14:29:56
【问题描述】：

当 HTML body 与 background 具有相同颜色时，我想更改元素的颜色。

我使用具有多种颜色的body 元素，文本有时不可读。例如，当我的 HTML 正文加载白色背景颜色时，我需要将文本颜色更改为黑色。

这是我的代码：

var i = 0;

function change() {
  var doc = document.getElementById(\"background__color\");
  var color = [\"#15ec34\", \"#077981\", \"#8fe607\", \"#4a66ea\"];
  doc.style.backgroundColor = color[i];
  i = (i + 1) % color.length;
}
setInterval(change, 1000);

// Here is the code to change the text color
var doc = document.getElementById(\"background__color\");
var changeColor = document.querySelector(\"#ch\")

if (doc.style.backgroundColor == \"black\") {
  changeColor.style.color = \"#fff\";
}

<body id=\"background__color\">
  <div>
    <div class=\"greeting\">
      <p id=\"ch\">Hello world!</p>
    </div>
  </div>
</body>

标签： javascript html

【解决方案1】：

把整个东西放在函数里面

var i = 0;

function change() {
  var changeColor = document.querySelector("#ch")
  var doc = document.getElementById("background__color");
  var color = ["#15ec34", "#077981", "#8fe607", "#4a66ea", "black"];
  doc.style.backgroundColor = color[i];
  i = (i + 1) % color.length;
  if (doc.style.backgroundColor === "black") {
    changeColor.style.color = "#fff";
  } else {
    changeColor.style.color = "red"
  }
}
setInterval(change, 1000);

#ch {
  font-size: 54px;
}

<body id="background__color">
  <div>
    <div class="greeting">
      <p id="ch">Hello world!</p>
    </div>
  </div>
</body>

您可以稍后根据您的要求更改颜色

【讨论】：