Question

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

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.style是undefined。
箭头功能binds context，因此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 2

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 3

感谢您的帮助。我更改了此设置-e.target，现在可以了。我必须阅读有关箭头功能和此内容的信息。

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

3 个答案: