当我单击该元素时，如何使网页中的其他元素变暗？答案

【问题标题】：How do I dim other elements in the webpage when I click on that element?当我单击该元素时，如何使网页中的其他元素变暗？
【发布时间】：2017-05-31 08:31:58
【问题描述】：

我正在建立一个 wordpress 网站，并且在标题部分有一个搜索栏。当我使用搜索栏时（例如在 Quora.com 中），如何在搜索栏以外的其他元素上创建 dim effect(background:rgba(0,0,0,0.3))。如果我将代码用于其他元素（搜索栏除外），例如输入框或任何其他 div，则此代码（您的答案）也应该可以工作。

如果您提供一个可灵活用于任何 div 的答案，我会更加满意。

提前谢谢你。

【问题讨论】：

I will be more satisfied if you come with an answer that is flexible to use for any div. 您似乎将 StackOverflow 与代码编写服务混淆了。
什么是真正的 StackOverflow？
补充 Rory 的评论 - 你有没有尝试过，但效果不佳？您能否将其包括在内，以便我们看看出了什么问题？

标签： javascript jquery html css wordpress

【解决方案1】：

需要给需要点击的元素添加点击事件。然后，您可以将函数绑定到单击时触发的该事件，如下所示：

var test = document.getElementById("test");
test.addEventListener("click", changeColour);

function changeColour() {
  var changeme = document.getElementById("change");
  changeme.classList.add("addopacity");
}

#change {
  background: #000;
  width: 100px;
  height: 100px;
}
#change.addopacity {
  opacity: 0.2;
}

<button id="test">Click me please</button>
<div id="change"></div>

请注意，您不必像我上面那样向目标元素添加类，您可以在函数中轻松添加带有changeme.style.opacity = "0.2"; 的内联样式。

如果你想点击元素本身并让它改变颜色，你可以做类似的事情：

var test = document.getElementById("change");
test.addEventListener("click", changeColour);

function changeColour() {
  this.classList.add("addopacity");
}

#change {
  background: #000;
  width: 100px;
  height: 100px;
  color: #fff;
}
#change.addopacity {
  opacity: 0.2;
}

&lt;div id="change"&gt;CLICK ME&lt;/div&gt;

【讨论】：

【解决方案2】：

使用opacity property 并将其应用到您需要的任何地方。

div {
    opacity: 0.3;
}

【讨论】：

如何感知点击并相应地改变不透明度？
@codewiz 您添加了一个事件，当该事件被触发时，它会将 CSS“不透明度”类应用于您需要透明的任何元素。使用 JavaScript 了解 JavaScript events 和 how to apply CSS。