Question

无法设置 js 中未定义的样式的属性“boxShadow”

2018-12-04

1373

javascript styles

我完全不知道，为什么这段代码不起作用。我在控制台中收到一条警告： “未捕获的 TypeError：无法在 HTMLDivElement.el.addEventListener 上设置未定义的属性‘boxShadow’” 我的代码：

document.addEventListener('DOMContentLoaded', function() {
    const card = document.querySelectorAll('.projects_pic');

    for(let el of card){
    
        el.addEventListener('mouseover',  () =>{
            this.style.boxShadow = "-1px 9px 40px -1px black";
        })
    }
    

});

Answer 1

this 指的是根文档，将参数传递给您的函数并使用 .target

document.addEventListener('DOMContentLoaded', function() {
  const card = document.querySelectorAll('.projects_pic');

  for (let el of card) {
    el.addEventListener('mouseover', (el) => {
      el.target.style.boxShadow = "-1px 9px 40px -1px black";
    })
  }
});

<div class="projects_pic">test</div>
<br>
<div class="projects_pic">example</div>

Answer 2

这意味着 this.style 是 未定义 。
箭头函数绑定上下文，因此 this 不是您悬停的元素。
改用 function(){/*content*/>

document.addEventListener('DOMContentLoaded', function() {
    const card = document.querySelectorAll('.projects_pic');

    for(let el of card){
    
        el.addEventListener('mouseover',  function(){
            this.style.boxShadow = "-1px 9px 40px -1px black";
        })
        
    }
    

});

div {
 width: 10px;
 height: 10px;
 background-color: yellow; 
}

<div class="projects_pic"></div>

Answer 3

谢谢你的帮助。我把这个改成了 e.target，现在没问题了。我必须阅读关于箭头函数和这个的内容。