Question

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>I need Help</title>
    <style media="screen">
    .try {
        padding: 3em;
        background: #B51C35;
        text-align: center;}
    .try a {
        display: inline-block;
        padding: 0 .5em;
        font-size: 2em;
        font-weight: 900;
        color: #FFFCED;
        text-decoration: none;
        border: 5px solid #FFFCED;}
    </style>
  </head>
  <body>
    <div class="">
      <h3 style="text-align:center;">The event in the console was worked but remove Attribute is not work!! <br />I just need the advice or if you can told me why is not working? </h3>
    </div>
    <div class="try movemaus">
      <a href="#">Book Now!</a>
    </div><!-- .cta -->

    <script>
      const NEWSTYLE = document.querySelector(".movemaus");
      NEWSTYLE.addEventListener('mouseleave', function(){NEWSTYLE.removeAttribute(".try");}, false);
      NEWSTYLE.addEventListener('mouseleave', function(){console.log("The Function is work in the Console");}, false);
    </script>
  </body>
</html>

亲爱的，控制台中的事件有效，但是remove Attribute不起作用！我只需要建议，或者如果您可以告诉我为什么不起作用？提前致谢，穆斯塔法

Answer 1

该事件确实有效，但是从元素中删除类的方法不正确。您可以使用removeAttribute来代替该类，而不是element.classList.remove(className)。

const NEWSTYLE = document.querySelector(".movemaus");
NEWSTYLE.addEventListener('mouseleave', function() {
  NEWSTYLE.classList.remove("try");
}, false);
NEWSTYLE.addEventListener('mouseleave', function() {
  console.log("The Function is work in the Console");
}, false);

.try {
  padding: 3em;
  background: #B51C35;
  text-align: center;
}

.try a {
  display: inline-block;
  padding: 0 .5em;
  font-size: 2em;
  font-weight: 900;
  color: #FFFCED;
  text-decoration: none;
  border: 5px solid #FFFCED;
}

<div class="">
  <h3 style="text-align:center;">The event in the console was worked but remove Attribute is not work!! <br />I just need the advice or if you can told me why is not working? </h3>
</div>
<div class="try movemaus">
  <a href="#">Book Now!</a>
</div>
<!-- .cta -->

Answer 2

removeAttribute删除命名属性。您传递的值应该是属性名称（例如"class"），而不是CSS选择器（例如.try）。

如果要从元素中删除类，则应使用the classList object。

NEWSTYLE.classList.remove("try");

Answer 3

.try是一个CSS类，不是属性。您可以使用class完全删除removeAttribute属性，但不能从值中删除单个类。对于此任务，您可以使用classList。

为什么不合并事件侦听器？！

document.querySelector(".movemaus").addEventListener('mouseleave', e => {
  e.target.classList.remove("try");
  console.log("The Function is work in the Console");
});

.try {
  padding: 3em;
  background: #B51C35;
  text-align: center;
}

.try a {
  display: inline-block;
  padding: 0 .5em;
  font-size: 2em;
  font-weight: 900;
  color: #FFFCED;
  text-decoration: none;
  border: 5px solid #FFFCED;
}

<div class="">
  <h3 style="text-align:center;">The event in the console was worked but remove Attribute is not work!! <br />I just need the advice or if you can told me why is not working? </h3>
</div>
<div class="try movemaus">
  <a href="#">Book Now!</a>
</div>

EventListener不起作用

3 个答案: