Question

我正在尝试使用addClass函数通过JavaScript添加类，但我无法添加该类。是否有一种特殊的方法来定义将添加到元素onclick的类？这就是我的尝试：

＆＃13;

var input = document.querySelector('.sb-input');
var image = document.querySelector('.sb-label img');
image.addEventListener('click', function() {
  if (classie.has(input, 'open'))
    classie.remove(input, 'open')
  else
    classie.add(input, 'open');
  console.log('I am back')
});

＆＃13;

.search-bar {
  position: absolute;
  top: 30px;
  right: 60px;
  width: 300px;
  height: 40px;
  overflow: hidden;
}
.sb-label {
  position: absolute;
  right: 0px;
  display: block;
  width: 50px;
  height: 40px;
  background-color: #32ab32;
  text-align: center;
  z-index: 10;
  cursor: pointer;
}
.sb-label img {
  display: block;
  z-index: 30;
  cursor: pointer;
}
.sb-input {
  position: absolute;
  right: 0px;
  width: 50px;
  height: 40px;
  border: none;
  backface-visibility: hidden;
  transition: left 0.7s;
  z-index: 5;
}
.sb-input .open {
  z-index: 90;
}
.sb-input .open {
  width: 100%;
  transition: left 0.7s;
}

＆＃13;

<div class="search-bar">
  <form>
    <label class="sb-label" id="sb-label">
      <img src="search-icon01.png" width="35px" height="35px">
    </label>
    <input type="search" class="sb-input" id="sb-input" placeholder="Enter Search Word">
  </form>
</div>

＆＃13;

我添加了一个回调，我在控制台上收到一条消息，表明该功能正常，当我这样做时，它有效：

var input = document.querySelector('.sb-input');
var image = document.querySelector('.sb-label img');
image.addEventListener('click', function() {
  input.style.zIndex = 90;
  input.style.width = '100%';
  console.log('I did it')
});

显然问题出在我的样式表上。有人可以帮我纠正这个异常现象吗？

Answer 1

我很好奇你从哪里得到classie？使用classList，我认为classie对于我们的低级开发人员来说过于优雅：P

段

<!doctype html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    .search-bar {
      position: absolute;
      top: 30px;
      right: 60px;
      width: 300px;
      height: 40px;
      overflow: hidden;
    }
    .sb-label {
      position: absolute;
      right: 0px;
      display: block;
      width: 50px;
      height: 40px;
      background-color: #32ab32;
      text-align: center;
      z-index: 10;
      cursor: pointer;
    }
    .sb-label img {
      display: block;
      z-index: 30;
      cursor: pointer;
    }
    .sb-input {
      position: absolute;
      right: 0px;
      width: 50px;
      height: 40px;
      border: none;
      backface-visibility: hidden;
      transition: left 0.7s;
      z-index: 5;
    }
    .sb-input .open {
      z-index: 90;
    }
    .sb-input .open {
      width: 100%;
      transition: left 0.7s;
    }
  </style>
</head>

<body>
  <div class="search-bar">
    <form>
      <label class="sb-label" id="sb-label">
        <img src="search-icon01.png" width="35px" height="35px">
      </label>
      <input type="search" class="sb-input" id="sb-input" placeholder="Enter Search Word">
    </form>
  </div>
  <script>
    var input = document.querySelector('.sb-input');
    var image = document.querySelector('.sb-label img');
    image.addEventListener('click', function() {
      if (input.classList.contains('open')) {
        input.classList.remove('open');
      } else {
        input.classList.add('open');
        console.log('i am back')
      }

    });
    var input = document.querySelector('.sb-input');
    var image = document.querySelector('.sb-label img');
    image.addEventListener('click', function() {
      input.style.zIndex = 90;
      input.style.width = '100%';
      console.log('did i do it')
    });
  </script>
</body>

</html>

如何定义一组可以使用JavaScript添加为类的CSS规则？

1 个答案:

段