更改伪类jquery的样式答案

【问题标题】：change style of pseudo class jquery更改伪类jquery的样式
【发布时间】：2017-02-19 13:05:15
【问题描述】：

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

这是我的代码

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 元素。我搜索了那个但没有找到解决方案。我希望有人有一个想法。

【问题讨论】：

标签： jquery pseudo-class

【解决方案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/

【讨论】：

【解决方案2】：

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

【讨论】：