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;
}

Answer 2

尝试，JQuery不支持important

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

As这将是内联CSS，因此它将具有首选项

Answer 3

绝对可以动态覆盖CSS。它是没有被应用的！important属性吗？

确实无法使用.css（）方法添加它。但是，您可以使用.attr（）方法实现此目的：

$(".mainDiv").attr("style", "min-height: " + ($(window).height() * 0.7) +"px !important");

来源： How to apply !important using .css()?

Answer 4

尝试

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

演示：Fiddle

Answer 5

而不是引号（“），而不是使用返回标记，这是jQuery更新css的唯一方法。

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

Answer 6

尝试不使用{}

$(".mainDiv").css("min-height", ($(window).height() * 0.7) +"px");

您可能还需要单独进行计算，将其保存在变量中，然后使用此变量，例如：

var newHeight = $(window).height() * 0.7;
$(".mainDiv").css("min-height", newHeight +"px");

Answer 7

试试这个

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

或只是

$(".mainDiv").attr('style',"min-height:"+($(window).height() * 0.7) +"px !important;");

Answer 8

检查fiddle。您可以尝试$(".mainDiv").css({"min-height" : ($(window).height() * 0.7) +"px"});

Answer 9

你可以试试这个

$(document).ready(function() {
    $(".mainDiv").attr('style', 'min-height: ' +($(window).height() * 0.7) +"px !important");
});

FIDDLE DEMO

参考更多Refer Here

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

9 个答案: