Question

I want to dynamically set the height of an element .selected based on the screen height. $('.selected').css('height', height); and $('.selected').height(height); work but when another element becomes .selected it doesn’t get affected by this rule.

What I really want to do is something like this:

var s = $('<style>.selected{height:'+height+'px}</style>').appendTo(document.head);
...
// change the height later
s.remove();
s = $('<style>.selected{height:'+new_height+'px}</style>').appendTo(document.head);

Is there a better way to do this?

Answer 1

You can use document.styleSheets[0].insertRule(".selected{height:"+new_height+"px}", 0); or similar. You can read more about manipulating stylesheets with insertRule here

In general tho, what you are doing is fine. If i was you i’d go with keeping a refrence to your style element tho and replace it with the new one like this:

var s = $('<style>.selected{height:'+height+'px}</style>').appendTo(head);
...
// change the height later
s.replaceWith('<style>.selected{height:'+new_height+'px}</style>');