是否可以动态覆盖css?
就像在 css 中我们指定
.mainDiv{
min-height:100px !important
}
是否可以对 jquery css 做同样的事情?
我试过了
$(".mainDiv").css({"min-height" : ($(window).height() * 0.7) +"px !important"});
但这不起作用。
最好的方法是覆盖样式是使用 css,而不是 jquery。你只能用 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;
}
试试看,important
JQuery 不支持
$(".mainDiv").css({"min-height" : ($(window).height() * 0.7) +"px"});
由于这将是内联 CSS,因此它将具有优先权
绝对可以动态覆盖 CSS。是没有被应用的 !important 属性吗?
确实不能用 .css() 方法添加。但是,您可以使用 .attr() 方法实现此目的:
$(".mainDiv").attr("style", "min-height: " + ($(window).height() * 0.7) +"px !important");
代替引号 ("),使用反引号代替 `,这是 jQuery 更新 css 的唯一方式。
$(\`.mainDiv").css({"min-height" : ($(window).height() * 0.7) +"px !important\`});
尝试不使用 {}
$(".mainDiv").css("min-height", ($(window).height() * 0.7) +"px");
您可能还需要单独进行计算,将其保存在变量中,然后只使用此变量,例如:
var newHeight = $(window).height() * 0.7;
$(".mainDiv").css("min-height", newHeight +"px");
试试这个
$(".mainDiv").css({"min-height" : ($(window).height() * 0.7) +"px"});
要不就
$(".mainDiv").attr('style',"min-height:"+($(window).height() * 0.7) +"px !important;");
检查这个小提琴。你可以试试$(".mainDiv").css({"min-height" : ($(window).height() * 0.7) +"px"});