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

admin管理员组

文章数量:1293391

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?

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?

• javascript
• jquery
• css

Share Follow edited Feb 2, 2011 at 2:21 anonymous coward asked Feb 2, 2011 at 1:28 anonymous cowardanonymous coward 12.8k1313 gold badges5858 silver badges9999 bronze badges 1

• 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 Commented Feb 4, 2011 at 19:26

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

Right, well, when you perform that mand, 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.

本文标签： javascriptHow to make the effects of jQuery39s (element)css() persistentStack Overflow