4

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 this 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?

anonymous coward
  • 12,594
  • 13
  • 55
  • 97
  • 1
    I am selecting Alexsander Akers' answer, with this **caveat**: In the case where you need persistence for a style, and all of the elements *may not be* within the same container, adding/removing a stylesheet object may be the best choice. **However**, in cases where all of the elements are within the same parent, a style/class definition should be created and toggled on the **parent/container**, via `toggleClass()` or `addClass()`/`removeClass()`. – anonymous coward Feb 04 '11 at 19:26

5 Answers5

4

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>');
Matt Ball
  • 354,903
  • 100
  • 647
  • 710
Alexsander Akers
  • 15,967
  • 12
  • 58
  • 83
  • Is this acceptable in cases where the user may toggle styles? – anonymous coward Feb 02 '11 at 02:00
  • 3
    I suppose the better practice is to create multiple style rules, and simply toggle the classes on the parent/container element. I just thought that jQuery might have something that handled a global rule change for you. Thanks! – anonymous coward Feb 02 '11 at 02:20
  • 1
    Work for me with $('') .appendTo('head') .html('div.myClass { background:yellow; }'); – molokoloco Oct 15 '11 at 01:23
2

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!

Pablo Fernandez
  • 103,170
  • 56
  • 192
  • 232
2

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...

JCOC611
  • 19,111
  • 14
  • 69
  • 90
  • This is actually what I ended up doing, for my particular problem, because all of the elements were within the same container. However, instead of using `.css()`, I used `.toggleClass()` or `.addClass()` and `.removeClass()` on the parent, and created a matching style rule for children of `parent.class { foo: bar; }` – anonymous coward Feb 04 '11 at 19:28
1

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

Victor
  • 4,721
  • 1
  • 26
  • 31
  • I agree. Was hoping it came across as a clear example of what works, so that my intended effect would be clear. Thanks for your input! – anonymous coward Feb 02 '11 at 01:59
0

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.

Community
  • 1
  • 1
Orbling
  • 20,413
  • 3
  • 53
  • 64
  • Actually, I'm appending new paragraph elements to the existing container. The new elements aren't styled. – anonymous coward Feb 02 '11 at 02:02
  • @anonymous coward: Similar principle then, the new elements coming in still were not present when you initially made the modification. `$('#container p')` corresponds to the time of calling, not for all time. Anything added later, will need doing again. – Orbling Feb 02 '11 at 02:04
  • Yes, I meant to clarify but left out that "It is [the new elements]...". I will probably just create multiple class rules, and toggle classes as necessary. – anonymous coward Feb 02 '11 at 02:18
  • @anonymous coward: That's what I tend to do. – Orbling Feb 02 '11 at 02:21