单击窗口/另一个元素时如何更改所有元素的颜色？答案

【问题标题】：How to change the color of all elements when the window/another element is clicked?单击窗口/另一个元素时如何更改所有元素的颜色？
【发布时间】：2020-07-25 13:00:54
【问题描述】：

我正在创建一个网页，顶部有一个所有内容标题的列表。当用户点击其中的每一个时，网页的相关部分应变为蓝色。但是，事实并非如此。我的javascript一定有问题。初始名单：

<h1><u>Quotations!</u></h1>
<ol>Index:
  <li id="bq" onclick="bq()">blockquotes</li>
  <li id="sq" onclick="sq()">Short Quotations</li>
  <li id="a" onclick="a()">Abbreviations</li>
  <li id="ad" onclick="ad()">Addresses</li>
  <li id="c" onclick="c()">Cites</li>
  <li id="bdo" onclick="bdo()">BDOs</li>
</ol>

页面内容：

<div id="bqdiv">
  <h5>Blockquotes</h5>
  <blockquote>
    These have indents! They define a section that is quoted from another source.
  </blockquote>
</div>
<div id="sqdiv">
  <h5>Short Quotations (q tag)</h5>
  <p>This is an example: 
    <q>Hello</q>
  </p>
</div>
<div id="a">
  <h5>Abbreviations</h5> 
  <p>These can be <abbr title= "HEYA!">hovered</abbr> over!</p>
</div>
<div id="addiv">
  <h5>Addresses</h5>
  This is an address:
  <address>
    Addresses are in italic <br>
    and browsers always add a break b4 and after the <address></address> element
  </address>
  After the address
</div>
<div id="cdiv">
  <h5>Cites</h5>
  <p>
    <cite>Cites</cite> define the title of something creative, like a painting!<br>
    They are in italic, like this.
  </p>
</div>
<div id="bdodiv">
  <h5>Bi-Directional Override (BDO)</h5>
  <p>It is used to override the text direction, <bdo dir="rtl">like this!</bdo></p>
</div>

我目前拥有的 javascript：

function bq() {
  document.getElementById("bqdiv").style.color="blue";
}
function sq() {
  document.getElementById("sqdiv").style.color="blue"'
}
function ad() {
  document.getElementById("addiv").style.color="blue";
}
function c() {
  document.getElementById("cdiv").style.color="blue";
}
function bdo() {
  document.getElementById("bdodiv").style.color="blue";
}
window.addEventListener("click", function(event)) {
                document.getElementById("bqdiv").style.color="black"
                document.getElementById("sqdiv").style.color="black"
                document.getElementById("addiv").style.color="black"
                document.getElementById("cdiv").style.color="black"
                document.getElementById("bdodiv").style.color="black"
            }

【问题讨论】：

标签： javascript html colors onclick window

【解决方案1】：

当您调用 window.onClick 时，看起来您正在执行 function {} 而不是 function(){}。如果可能的话，你应该尝试使用它

window.addEventListener("click", function(event) {
});

【讨论】：

在这种情况下，不接受蓝色。因为单击应用于窗口的所有元素。需要例外。
我已经把我的代码改成了这个，但是现在蓝色没有显示？？
你试过不使用事件监听器吗？

【解决方案2】：

如何创建一个“黑色”函数而不是 window.onclick 并在将颜色设置为蓝色之前调用它？

function black() {
  document.getElementById("bqdiv").style.color="black";
  document.getElementById("sqdiv").style.color="black";
  document.getElementById("addiv").style.color="black";
  document.getElementById("cdiv").style.color="black";
  document.getElementById("bdodiv").style.color="black";
}

并在每个 div 的 onclick 函数中调用它（下面的示例）：

function bq() {
  black();
  document.getElementById("bqdiv").style.color="blue";
}

哦，我刚刚意识到你想要点击其他任何地方来使 div 变黑，所以请保留window.onclick - 只需调用black()。

【讨论】：