更改僞類jquery的樣式

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

它實際上是可以改變一個理想跟蹤準的風格o元素使用JavaScript，使用幾種解決方法之一。請閱讀Pankaj Parashar的優秀教程http://pankajparashar.com/posts/modify-pseudo-elements-css/