Change CSS properties of non-existing elements

Question

I want to change the dimensions of a set of elements that are not created yet. They will be created by a JavaScript script that I don't have access to. JQuery's css() function would apply the changes only on existing items, while I want the code to work like if I had set CSS properties in a CSS file.

Can anyone help me do it?

• pimvdb: Do those elements have something identifiable, like a class? If so, you could define rules directly in CSS.
• VisioN: What's the problem of setting these properties in CSS?
• André: @pimvdb The CSS properties of the element must be set based on the user action.
• André: @VisioN The elements I want to edit do have a class.
• charlietfl: if the user interaction is event based after the new elements are inserted, situation is straightforard. Need to provide a lot more information as to what you expect

Answer 1

One option would be to dynamically create a style element:

$("<style type='text/css'> .redbold{ color:#f00; font-weight:bold;} </style>").appendTo("head")
$("<div/>").addClass("redbold").appendTo("body");

Taken from here: Create a CSS rule / class with jQuery at runtime.

Here's a possible IE alternative (see Creating a CSS class in jQuery):

document.styleSheets[0].addRule('body', 'background: green', -1);

For reference, see the documentation for addRule.

• charlietfl: can't insert css rules directly into head tag without a style tag. Older IE versions don't do well with appended style tags either
• dyersituations: @charlietfl - I messed up when pasting in the code (new to SO). Also added a possible alternative for IE.