JS事件和CSS媒體查詢對同一元素操作樣式發生衝突解決方案（轉載）

原文地址：https://blog.csdn.net/qq_37943295/article/details/75647673

1 問題的描述

媒體查詢針對不同的屏幕寬度大小對某元素調整樣式，而JS事件針對不同的操作對某元素進行操作，當JS事件和媒體查詢針對的是同一元素進行樣式改變的操作時，會出現一個問題，就是當JS改變了該元素的樣式之後，當媒體查詢再次滿足時，該元素應該被媒體查詢改變的樣式卻沒有生效，該元素依然保持着JS事件改變後的樣式。

2 問題的舉例

例如，JS改變樣式通常有兩種辦法，第一種通常是

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

• 1

例如上面的代碼，控制$(".arrow")的樣式發生改變，讓其css("right","0")，在這種情況下，一旦JS事件被觸發，$(".arrow")的屬性right就一直都是0，儘管當媒體查詢滿足了觸發的條件，樣式改變都不會生效，例如

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

• 1
• 2
• 3
• 4
• 5

上面是把.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");
});

• 1
• 2
• 3
• 4
• 5

4 注意的問題

利用$("").addClass()所添加的樣式r-0，要確保它的權重比原本默認的樣式權重要高，不然沒辦法達到替換的效果。例如 
默認樣式

    .sidebar .arrow {
        right: 10px;
    }

• 1
• 2
• 3

高權重樣式

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