javascript - 如何单击任何元素并且目标将切换到该元素

Question

这是我尝试编写的代码我希望我的鼠标单击页面上的任何元素，目标将是 boxshadow ，在我单击该元素后，我可以单击另一个元素，之前的元素将丢失其 boxshadow，我正在使用这样的代码

  document.onclick = function(evt){ 
  console.log('clicked');
  var target = null,
  target = evt.target;
  var obj = document.querySelector(target);
  obj.style.boxShadow = '3px 10px 100px yellow';
  if(target === 'null'){
   console.log('ye');
  obj.style.boxShadow = '0'; 
  obj = document.querySelector(target) 
  console.log(obj)}     
   return target}

Answer 1

应用 CSS 后添加元素选择器，并使用提供的选择器选择这些元素。

通过选择应用的属性来删除应用的 CSS。

document.onclick = function(evt) {
  var target = evt.target;
  var pastElems = document.querySelectorAll('.shadowed');
  [].forEach.call(pastElems, function(el) {
    el.style.boxShadow = 'none';
    target.classList.remove('shadowed');
  })
  target.style.boxShadow = '3px 10px 100px yellow';
  target.classList.add('shadowed');
}

.elem {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  float: left;
}

<div class='elem'></div>
<div class='elem'></div>
<div class='elem'></div>
<div class='elem'></div>