CSS - adding !important with variable

Question

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

});

On a side note - if you're doing this to make the footer always shown, consider using `position: fixed;` on it and not adjusting the content height. Just my two cents. — meiamsome, Jul 01 '13 at 15:46
@meiamsome hey, thanks for the response. Actually the footer thing is a different issue I am having, as well. I set it to fixed, which works great, except for the fact that I have to have a min-width of 1300px on it and when the window is smaller the scroll bar shows up but does not scroll the fixed footer! how can I overcome that? — Moose, Jul 01 '13 at 15:49
@Moose Why do you even need `!important` here for the inline style? Is this value set as `!important` in a stylesheet somewhere? — mclark1129, Jul 01 '13 at 15:54
@Moose You could go the jquery way: `$(window).scroll(function(){ $('#footer').css('left',-$(window).scrollLeft()); });` but I don't know if that's really better or not. (I'd say it is, as losing a footer if the JavaScript is disabled is less major than losing content.) — meiamsome, Jul 01 '13 at 15:56
Using `!important` in website stylesheets is usually a bad practice - the attribute is meant to be used in places like user-specific stylesheets to override styling provided by the page. Instead you should figure out why the style isn't being applied without that attribute. (And if you're setting it on the element inline, it should have the highest specificity - it might be that something else is making it impossible for the element to have that height.) — millimoose, Jul 01 '13 at 16:13

score 2 · Answer 1 · edited May 23 '17 at 10:25

2

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

edited May 23 '17 at 10:25

Community

1
1

answered Jul 01 '13 at 15:45

Andy

14,427
3
52
76

@Andy, I have tried changing the height the way you suggested, but the thing is that it needs to have an !important there because of other elements on the page :( – Moose Jul 01 '13 at 16:10
@Moose Did you look at the thread I linked for other fixes? I would recommend restructuring the other elements so `!important` is not needed – Andy Jul 01 '13 at 16:11
@andy, hmmmmmm darnit..... i didnt wanna do that!! lol okay ill see if that works. – Moose Jul 01 '13 at 16:18

Mohit Bhansali · Answer 2 · 2013-07-01T15:52:02.987

1

You can add !important like this:

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

edited Jul 01 '13 at 15:52

answered Jul 01 '13 at 15:43

Mohit Bhansali

1,725
4
20
43

score 0 · Answer 3 · answered Aug 09 '18 at 21:14

0

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

answered Aug 09 '18 at 21:14

Jonhatan Fajardo

348
6
11

CSS - adding !important with variable

3 Answers3