Defining a class with specific style dynamically in jQuery

Question

Is it possible to define a class with specific style attributes dynamically with jQuery, rather than setting the style of all elements with that class?

I could set the attributes of the class at the end of the script once all the elements have been created, but is that the best way to go about it? If I define the style of the class with $('.class').css('property','value'); at the beginning of the script, nothing would happen because the elements with class .class haven't been created yet, right?

Answer 1

Not sure what you're reasoning for this is, but yes - you have to call the script once the elements have been created. If you don't want to have the script at the end of your document, wrap it in

$(document).ready(function() {
 ...
});

or, alternatively, the shorthand

$(function() {
 ...
});

So it fires once all the HTML is loaded.

Answer 2

If I'm understanding you, you want to add style to specific elements.

You don't have to use .css(a,b) to do this. jQuery has a function called addClass("className"); that will add a class to whatever element you want.

$('.originalClass').addClass('addedClass');

It doesn't overwrite the original.

Is that what you wanted?

---

EDIT:

Or are you saying that you want to modify your stylesheet in javascript?

If that's the case, there are javascript rules for modify stylesheet properties.

If you (for some reason) can't change the stylesheet, then maybe you could simply store your styles in an object, and apply that.

var stylesToAdd = { background:"orange", border:"1px solid blue" }

And use .css() to apply them.

$('#myElement').css(stylesToAdd);

Answer 3

The proper way to do that is to use CSS. If you want elements with class "foo" to have a bunch of properties, then put those properties in a CSS file and associate them with an appropriate selector:

.yourClass {
  font-weight: bold;
  color: green;
}

If you need to do this dynamically, it's possible to write CSS blocks with Javascript. Put a <style> element in your page and give it an "id" value:

<style id='dynamicStyle'></style>

Then you can set it with jQuery:

$('#dynamicStyle').text(".yourClass { font-weight: bold; }");