Is it possible to override css dynamically using jquery?

Question

Is it possible to override css dynamically?

Like in css we specify

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

Is it possible to do the same with jquery css?

I've tried

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

But this doesn't work.

Answer 1

The best way is to overwrite the styles is using css, and not jquery. F.e. you can only add a class with jquery, and define the rest in your stylesheet.

//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

Try, important is not supported by JQuery

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

As This will be inline CSS, thus it will have preference

Answer 3

It is definitely possible to override CSS dynamically. Is it the !important attribute that isn't getting applied?

It's true that it cannot be added with the .css() method. However, you can achieve this with the .attr() method:

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

Source: How to apply !important using .css()?

Answer 4

Try

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

Demo: Fiddle

Answer 5

Instead of quotes ("), use back ticks instead `, this is the only way jQuery updates css.

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

Answer 6

Try without the {}

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

It's possible you may also need to do the calculation seperately, save it in a variable, and just use this variable, such as:

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

Answer 7

Try this

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

or just

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

Answer 8

Check this fiddle. You can try $(".mainDiv").css({"min-height" : ($(window).height() * 0.7) +"px"});

Answer 9

YOu can try this

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

FIDDLE DEMO

Refer For more Refer Here