如何使除特定元素以外的所有元素变暗

Question

我正在制作一个 Google Chrome 扩展程序，我正在右侧进行一些工作（在我的朋友的故事中），实际上，我正在搜索一个特定的朋友故事，他的名字出现在单击按钮后的输入元素中。

在搜索期间，我需要将除右侧元素之外的所有出现在黑色边框中的其他元素变暗，直到用户按下 X 按钮为止，但不要删除任何元素。

我不知道如何选取除一个元素以外的所有其他元素！！:(

以下是图片:

- Karam Najjar

---

使用目标元素的位置和尺寸来定义4个元素的遮罩，以遮盖其他所有内容。 - charlietfl

如何处理维度？什么是掩码(mask)？如何定义掩码！我不理解，抱歉。 - Karam Najjar

我过去曾通过使用画布元素覆盖整个页面，然后清除覆盖所需元素的部分来实现这一点。我现在手头没有代码，但是你可以获取要突出显示的元素的位置，并将这些坐标应用于clearRect。 - Scott

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>

- Scott