Overriding css properties declared via JavaScript

Question

jQuery is being used to set the height of each element, I want to override this by another bit of jQuery.

The code works as I've tried it on a child div:

var height = $('#module-104').height();
            console.log(height);

            $("#module-103").css({
                     'height' : height,
                     'padding-top' : 0
                 });

I've tried wrapping my code in the following tags to load it last but with no success.

$(document).live("on", function(){

                });

and

 $(window).bind("load", function() { 

 });

Any ideas? or would it be a simple case of adding !important to the height? if so what's the syntax for that in jQuery?

Cheers

@PinkTurtle, He has tried `$(window).bind("load"`. Still you think `ready(...)` is required ? — Rayon, Nov 06 '15 at 10:34
[It isn't that simple](http://stackoverflow.com/q/2655925/1267304). — DontVoteMeDown, Nov 06 '15 at 10:37
I don't need to add px as the height is being applied through the variable. I've tried the following: `'height' : height !important`,- However as predicted syntax is unexpected. How would I write this? — Z0idberg, Nov 06 '15 at 10:44
Add px and !important like this.. `$("#module").css( 'height' , height+"px !important");` — sarath, Nov 06 '15 at 10:50
just a side node - live and bind are deprecated since jQuery 1.7 instead you should use .on(..). And from my point of view you could also try $(document).ready(....). — Steven Web, Nov 06 '15 at 11:06

score 0 · Answer 1 · answered Nov 06 '15 at 10:58

Give the overriding script at end of the page(after all your scripts) and bind it inside window.onload

$(window).bind("load", function() { 
//Overriding code
$("#module").css( 'height' , height+"px !important");
});

If you are updating the css on an event, then make the above code inside a function, and call the function at the callback of the event or any code you want to override.

Overriding css properties declared via JavaScript

1 Answers1