擬似クラスjqueryの変更スタイル

Question

バーガーメニューボタンのスタイルを変更したい。しかし、擬似要素にはスタイル属性がありません。それで、なぜ要素の色を変えるのか分かりません。

ここでは、元のspan要素のでバーガーの真ん中の列を変更するために、その可能性に私のコード

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>

。 私はそれを探しましたが、解決策を見つけませんでした。私は誰かがアイデアを持っていることを望む

Answer 1

JavaScriptで擬似要素を選択することはできません。実際にはDOMに含まれていないためです。

代わりに、バーガーのために3つのdivを作成し、選択したときにクラスを切り替えるだけです。そのクラスが選択されると、2番目のdivは異なるスタイルを取得します。

クラスを切り替えることで、jQueryに依存するのではなく、CSSトランジションを使用することができます。

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

PSEUDのスタイルを変更することが実際に可能ですいくつかの回避策の1つを使用して、javascriptを使用してo要素を作成します。 Pankaj Parasharのこの優れたチュートリアルは、http://pankajparashar.com/posts/modify-pseudo-elements-css/