jquery - 是否可以使用 jquery 动态覆盖 css？

Question

是否可以动态覆盖CSS？

就像我们在 css 中指定的那样

.mainDiv{
   min-height:100px !important
 }

是否可以使用 jquery css 执行相同的操作？

我已经尝试过

$(".mainDiv").css({"min-height" : ($(window).height() * 0.7) +"px !important"});

但这行不通。

Answer 1

最好的方法是使用 css 覆盖样式，而不是 jquery。 F.e.您只能使用 jquery 添加一个类，并在样式表中定义其余部分。

//script to add a class, this can be anything
$('.mainDiv').click(function(){
    $(this).addClass('active');
});

//css to define the different min-heights. (I would not recommend using !important)
.mainDiv {
   min-height:100px !important;
}

.mainDiv.active {
   min-height:200px !important;
}