JSイベントとCSSメディアクエリが同一要素の操作スタイルに衝突する解決策

1問題の説明

メディアクエリは異なる画面幅の大きさに対してある要素に対してスタイルを調整し、JSイベントは異なる操作に対してある要素に対して操作を行い、JSイベントとメディアクエリが同じ要素に対してスタイルを変更する操作である場合、JSがその要素のスタイルを変更した後、メディアクエリが再び満足すると、その要素がメディアクエリによって変更されるべきスタイルが有効にならないという問題が発生する.この要素は依然としてJSイベントの変更後のスタイルを保持している.

2問題の例

例えば、JSがスタイルを変えるには通常2つの方法があり、1つ目は通常

$(".arrow").css("right","0");

例えば、上記のコードでは、$(".arrow")のスタイルをcss("right","0")に変更するように制御されているが、この場合、JSイベントがトリガーされると、$(".arrow")のプロパティrightは常に0である.メディアクエリがトリガーの条件を満たすと、スタイル変更は効果的ではないが、例えば、

@media only screen and (max-width: 940px) {
    .sidebar .arrow {
        right: 10px;
    }
}

.arrowの属性rightを10pxに変更したが、このメディアクエリはJSイベントと競合しているため、有効ではない.

3問題解決方法

Jqの$("").css()メソッドを利用して操作するのではなく、Jqの$("").addClass()メソッドを利用してスタイルを操作すればこの問題を解決することができ、スタイルオーバーライドの理屈を利用して効果を達成することができ、JSのイベントが実行された後、right：0のスタイルに影響効果を残したくなく、$("").removeClass()のメソッドを利用してスタイルを除去することができ、このように自分の変化効果を残し、メディアクエリーの効果を残すことができる.例:

$(".sidebar").hover(function(){
    $(".arrow").addClass("r-0");
},function(){   
    $(".arrow").removeClass("r-0");
});

4注意事項

$("").addClass()に追加されたスタイルr-0を使用して、デフォルトのスタイル権よりも重みが高いことを確認します.そうしないと、置き換えの効果は得られません.たとえば、既定のスタイル

    .sidebar .arrow {
        right: 10px;
    }

高ウェイトスタイル(High Weight Style)

.sidebar .arrow.r-0 {
    right: 0;
}