Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change CSS properties of non-existing elements

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?

like image 905
André Avatar asked Nov 10 '12 21:11

André


People also ask

How do I change the CSS of all elements?

To change the styles of all elements with a specific class: Use the querySelectorAll() method to get a collection of the elements with the specific class. Use the forEach() method to iterate over the collection. On each iteration, use the style object to change the element's styles.

How do I change the properties of a class in CSS?

Set Style Using element. One can use element. className to change various style parameters of an HTML element by clubbing those as a class and assigning the class name to the selected element with element. className .

Which CSS property changes the state of an element?

Transform property in CSS is invoked when there is a change in the state of the HTML element. You can rotate, skew, move and scale elements. It occurs when the state of an element is modified, like when you hover the mouse over a button or perform a mouse-click.


1 Answers

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.

like image 64
dyersituations Avatar answered Sep 30 '22 07:09

dyersituations