How to make the effects of jQuery's $(element).css() persistent?

For example, with a font-size switcher/button, if I use

    $('#container p').css('font-size', '24px');

it works as expected, but if I later add paragraph elements to the container (via ajax, etc), they are not styled with the updated font-size. I am aware that th开发者_JAVA技巧is is the intended behavior of the .css() method. I am simply asking:

What's the proper approach to changing a style for a CSS selector, and making those styles persistent?

---

Right, well, when you perform that command, it styles all p elements in #container. If you want it to be permanent, you could create a <style /> element and add the CSS stylings there.

---

To elaborate, you could do something like this:

$(document.head).append('<style>#container p{font-size: 24px;}</style>');

---

What jQuery does in that line is equivalent to:

<div id='container'>
  <p style='font-size:24px'>a</p>
  <p style='font-size:24px'>b</p>
  <p style='font-size:24px'>c</p>
</div>

For your particular case I'd get one of the stylesheets present in the document, like this:

var stylesheets = document.styleSheets

Which returns an array of styleSheet objects that contain the insertRule method, which you can use to add your new (permanent) css rule.

Cheers!

---

You cannot add the style directly w/ JavaScript, but you can however do this:

<div id="wrapper">
  <div id="paragraph1">blah</div>
  <div id="paragraph2">you</div>
</div>

and

$("#wrapper").css...

This way any paragraph you add to the wrapper will have the new font size...

---

Well you are adding style to exiting elements only, there is no way for jquery to know about the new elements.

---

The problem is probably that you are destroying the element upon which you have the style.

If you are bringing in via AJAX a replacement for #container, then all of the content will get destroyed and replaced with the new content. All of the <p> tags you added the style to will no longer exist, and it will need to be repeated on the newer entry.

What you could try is creating a class definition on the fly.