如何使特定的元素变暗

Question

我正在构建谷歌浏览器扩展程序，我正在做一些正确的工作（在我的朋友故事中），事实上，我正在搜索特定的朋友故事，其名称在点击后出现在输入元素中按钮。 我需要调暗/变暗图片中黑色边框中出现的所有其他元素，除了正确的元素，直到他按下X按钮

我不知道如何到达除了一个以外的所有其他元素!! ：（

图片：

Answer 1

我发现了我的密码！在画面上放置画布并剪切所选元素周围的部分。只需致电openOverlay(elem)，其中elem是您要突出显示的元素。

var padding = 5;  //Space around canvas
var animDelay = 250;  //Delay used in CSS animation and transition for canvas.highlight

var divs = document.getElementsByTagName("div");

for (var i = 0; i < divs.length; i++) {
  divs[i].addEventListener("click", function() {
    openOverlay(this);
  }, true);
}

function openOverlay(elem) {
  var loc = elem.getBoundingClientRect();
  var canvas = document.createElement("canvas");
  canvas.className = "highlight";
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  var ctx = canvas.getContext("2d");
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.clearRect(loc.left - padding, loc.top - padding, loc.width + padding * 2, loc.height + padding * 2);
  document.body.appendChild(canvas);
  window.overlayCanvas = canvas;
  canvas.onclick = closeOverlay;
}

function closeOverlay() {
  delete window.overlayCanvas;
  this.style.opacity = 0;
  var self = this;
  setTimeout(function() {
    self.parentNode.removeChild(self);
  }, animDelay);
}

//Press X to close?
window.addEventListener("keypress", function(e) {
  //120 is X
  if (e.which === 120 && window.overlayCanvas) closeOverlay.call(overlayCanvas);
}, false);

/* necessary part */
canvas.highlight {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  opacity: 0.5;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  -webkit-animation: canvasFade 250ms ease;
  animation: canvasFade 250ms ease;
}
@-webkit-keyframes canvasFade {
  from { opacity: 0; }
  to { opacity: 0.5; }
}
@keyframes canvasFade {
  from { opacity: 0; }
  to { opacity: 0.5; }
}

/* junk styling */
div {
  margin: 10px;
  width: 100px;
  height: 100px;
  display: inline-block;
  background: green;
  cursor: pointer;
}
div.funky {
  padding: 3px 8px;
  margin-top: 5.2px;
  border-bottom: 10px solid red;
}

<div>One</div>
<div>One</div>
<div class="funky">One</div>
<div>One</div>