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?

Do those elements have something identifiable, like a class? If so, you could define rules directly in CSS. — pimvdb, Nov 10 '12 at 21:13
@pimvdb The CSS properties of the element must be set based on the user action. — André, Nov 10 '12 at 21:17
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 — charlietfl, Nov 10 '12 at 21:25

score 5 · Accepted Answer · edited May 23 '17 at 12:18

5

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.

edited May 23 '17 at 12:18

Community

1
1

answered Nov 10 '12 at 21:21

dyersituations

128
1
7

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 – charlietfl Nov 10 '12 at 21:27
@charlietfl - I messed up when pasting in the code (new to SO). Also added a possible alternative for IE. – dyersituations Nov 10 '12 at 21:34

Change CSS properties of non-existing elements

1 Answers1