Question

我想改变汉堡菜单按钮的样式。但是伪元素没有风格属性。这就是为什么我不知道我如何改变元素的颜色。

这是我的代码

document.getElementById("but").addEventListener("click", function() {
    $( "button.burger.burger1:after span" ).animate({backgroundColor: "rgba(255,55,255,1)"}, 300 );
  });

button.burger {
  width: 60%;
  height: 4vh;
  border: none;
  background: transparent;
  position: relative;
  cursor: pointer;
 
}
button.burger:focus {
  outline: none;
}
button.burger.burger1:after, button.burger.burger1:before,
button.burger.burger1 span {
  width: 100%;
  height: 4px;
  border-radius: 100px;
  position: absolute;
  left: 0px;
  
  background: black;
}
button.burger.burger1:after, button.burger.burger1:before {
  content: "";
}
button.burger.burger1:after {
  top: 0px;
  margin-top: 0px;
  -webkit-transition: 0.2s all 0.4s, -webkit-transform 0.2s;
  transition: 0.2s all 0.4s, -webkit-transform 0.2s;
  transition: transform 0.2s, 0.2s all 0.4s;
  transition: transform 0.2s, 0.2s all 0.4s, -webkit-transform 0.2s;
}
button.burger.burger1:before {
  bottom: 0px;
  margin-bottom: 0px;
  -webkit-transition: 0.2s all 0.4s, -webkit-transform 0.2s;
  transition: 0.2s all 0.4s, -webkit-transform 0.2s;
  transition: transform 0.2s, 0.2s all 0.4s;
  transition: transform 0.2s, 0.2s all 0.4s, -webkit-transform 0.2s;
}
button.burger.burger1 span {
  top: 50%;
  margin-top: -2px;
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity 0.2s, svisibility 0.2s;
  transition: opacity 0.2s, svisibility 0.2s;
}

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div style="width:50px;">
  <button class="burger burger1">
    <span id="burgerRows"></span>
  </button>
</div>


<button id="but"></button>

可以更改汉堡的中间行，因为它是原始的span元素。我搜索了那个，但没有找到解决方案。我希望有人有个主意。

Answer 1

您无法使用JavaScript选择伪元素，因为它们实际上不在DOM中。

相反，只需为汉堡创建3个div，并在选择或不选择时切换类。选择该类后，第二个div将获得不同的样式。

通过切换类，您可以使用CSS转换而不是依赖于jQuery。

HTML：

<div class="burger">
    <div></div>
    <div></div>
    <div></div>
</div>

你的CSS：

.burger div {
  width: 50px;
  height: 4px;
  margin-bottom: 4px;
  border-radius: 50px;
  background: #000;
  transition: all 0.5s ease;
}

.burger.selected div:nth-of-type(2) {
   background: red;
}

和JS：

let burger = document.querySelector('.burger');

burger.addEventListener('click', function() {
    this.classList.toggle('selected');
});

https://jsfiddle.net/bd4gufoa/

Answer 2

实际上可以使用javascript更改伪元素的样式，使用几种解决方法之一。请阅读Pankaj Parashar在http://pankajparashar.com/posts/modify-pseudo-elements-css/

上的这篇优秀教程

改变伪类jquery的风格

2 个答案: