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

Question

我正在构建一个 google chrome 扩展，我正在做一些右侧的工作（在我的朋友故事中），事实上，我正在寻找一个特定的朋友单击按钮后名称出现在输入元素中的故事。我需要dim/darken搜索时除了右边的元素外出现在图片黑色边框中的所有其他元素，直到他按下X按钮

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

图片：

Answer 1

我找到我的代码了！在屏幕上放置一个 canvas 并剪切掉所选元素周围的部分。只需调用 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>

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

How to darken all elements apart from specific one

javascript

css

jquery

facebook

google-chrome-extension