Question

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

如果你得到一个可灵活用于任何div的答案，我会更满意。

提前感谢你。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

＆＃13;

var test = document.getElementById("change");
test.addEventListener("click", changeColour);

function changeColour() {
  this.classList.add("addopacity");
}

＆＃13;

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

＆＃13;

<div id="change">CLICK ME</div>

＆＃13;

Answer 2

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

div {
    opacity: 0.3;
}

点击该元素后，如何在网页中调暗其他元素？

2 个答案: