CODEWITHSUNDEEP
jquerycss
Moose
Moose

Reputation: 45

CSS - adding !important with variable

I want to be able to add an "!important" to the height of #content on line 7 of the code below. I need to be able to use the variable $newHeight because it needs to stay dynamic.

Does anyone know how I can append an !important to this css declaration? I tried using a plus (+) sign to concatenate, but was unsuccessful.

Here is the code:

$(window).resize(function() {

    var $windowHeight = $(window).height();
    var $newHeight = $(window).height()-$('#footer').height()-153;

    if ($windowHeight < 847){
        $('#content').css("height",$newHeight);         
}

});

Upvotes: 0

Views: 4824

Answers (3)

Jonhatan Fajardo
Jonhatan Fajardo

Reputation: 408

This work for me

let style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.backgrounds { background: ' + color + '!important; }';
document.getElementsByTagName('head')[0].appendChild(style);

Upvotes: 0

Mohit Bhansali
Mohit Bhansali

Reputation: 1785

You can add !important like this: 

var element = document.getElementById("content");
element.setAttribute('style', 'height:'+$newHeight+'!important');

Upvotes: 1

Andy
Andy

Reputation: 14575

You can't set !important with jQuery, see here for a demo of it not working, and here for a long explanation and some alternative answers

You could have used a class that had the height and !important but this isn't viable as height is variable. I would look on the above thread for a proper, solid answer

Alternatively, have you tried just changing the height like:

$('#content').height($newHeight);

Upvotes: 2

Related Questions