jQuery-更改未创建的div元素的样式

Question

I was trying to searchengine for this, but I'm not sure how to call it exactly.

I can change the style of my div elements successfuly, for example:

$(document).ready($('div.element1').css("float", "left"));

This will successfully change all the elements of class element1 that exist. However, the new (after above is executed) elements will still spawn with old option of float: right; . What is my best/simplest option for permanently changing the style of this div ? I can inject it manually after the element is created but that feels wrong to be honest.

Answer 1

It is better if you don't add inline style using .css() method, but instead just add/remove classes having your style, so create a class for all those elements' style.

If the newly created elements have the class you define, then they will have the style too.

Optionally, you can do this:

$(document).on('change or_other_event','your_selectors', function(){
   // your code
});

If the new elements have classes element1 , element2 ..., you would need something like this:

$(document).on('change','div[class*="element"]', function(){
   // your code
});

Answer 2

Just create a new class on your css and then add that class to your new element

.newElement{
 color:red//example style
}

$("<div>",{class:'newElement'})

Answer 3

Your code:

$(document).ready($('div.element1').css("float", "left"));

is equivalent to:

var element = $('div.element1').css("float", "left");
$(document).ready(element);

This means any un-drawn elements will not be affected. Instead use:

$(document).ready(function() {
   $('div.element1').css("float", "left");
});

The above code ensures changes are made once the page has loaded.