JS事件和CSS媒体查询对同一元素操作样式发生冲突解决方案

Veröffentlicht am

###1 问题的描述
媒体查询针对不同的屏幕宽度大小对某元素调整样式，而JS事件针对不同的操作对某元素进行操作，当JS事件和媒体查询针对的是同一元素进行样式改变的操作时，会出现一个问题，就是当JS改变了该元素的样式之后，当媒体查询再次满足时，该元素应该被媒体查询改变的样式却没有生效，该元素依然保持着JS事件改变后的样式。

###2 问题的举例
例如，JS改变样式通常有两种办法，第一种通常是

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

例如上面的代码，控制$(".arrow")的样式发生改变，让其css("right","0")，在这种情况下，一旦JS事件被触发，$(".arrow")的属性right就一直都是0，尽管当媒体查询满足了触发的条件，样式改变都不会生效，例如

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

上面是把.arrow的属性right改为10px，可是该媒体查询与JS事件有冲突，故不生效。

###3 问题解决办法
不要利用Jq的$("").css()方法去操作，而是利用Jq的$("").addClass()方法来操作样式便可以解决这个问题，利用的是样式覆盖的道理达到效果，当JS的事件被执行完了，不想让right：0的样式保留着影响效果，可以利用$("").removeClass()的方法移除样式，这样就可以达到既保留自己的变化效果，又可以保留媒体查询的效果。例如：

1
2
3
4
5
$(".sidebar").hover(function(){
    $(".arrow").addClass("r-0");
},function(){   
    $(".arrow").removeClass("r-0");
});

###4 注意的问题
利用$("").addClass()所添加的样式r-0，要确保它的权重比原本默认的样式权重要高，不然没办法达到替换的效果。例如
默认样式

1
2
3
.sidebar .arrow {
    right: 10px;
}

高权重样式

1
2
3
.sidebar .arrow.r-0 {
    right: 0;
}