Best way to add new css rules with jquery?

Question

I am dynamically inserting some html on a web page (after I detect an event from the user). This html needs some css styling and I am wondering what is the cleanest way to do it, using jQuery. I am not the website developer, so I can't add those rules to the original css.

Assume I have already inserted some html without styling, including a formElement class. I can write in my document a new <style> block, for instance:

my_html =  '<style type="text/css">';
my_html += '   .formElement {';
my_html += '       display: block;';
my_html += '       width: 240px;';
my_html += '       position: relative;';
my_html += '       padding: 4px 0;';
my_html += '   }';
my_html += '</style>';
my_html = $(my_html);
$('body').prepend(my_html);

Or, I can use the css method:

$('.formElement').css({
    'display': 'block',
    'width': '240px',
    'position': 'relative',
    'padding': '4px 0'
});

Which solution is the best/cleanest?

EDIT:

As I can't directly add the rules in the CSS, I will stick with the css method of jQuery. Some other related questions provide solutions as well:

I can't really use jQuery plugins, but if I could, I would certainly use jQuery.Rule

Thank you all for your precious help.

Your second code will not work if you add more elements with that class later. — Dogbert, Jan 03 '13 at 09:27
Also consider that second option will have more specificity as it is inline. — scottlimmer, Jan 03 '13 at 09:27

score 10 · Answer 1 · answered Jan 03 '13 at 09:28

10

Don't mix css and js together, especially if your properties don't contain computed or dynamic values: just define a CSS class

.mystyle {
    display: block;
    width: 240px;
    position: relative;
    padding: 4px 0;
}

and set the class

$('.formElement').addClass('mystyle');

answered Jan 03 '13 at 09:28

Fabrizio Calderan

120,726
26
164
177

2

Which of course bears the question, what is the best way to define a new css class with jquery? – BeniBela Jan 03 '13 at 09:31
Fabrizio solution does the same of what the OP needs and does the same as both of his options. It will be faster than the ones the OP posted. Instead of giving style proprieties to an element, he is adding a class that contains the proprieties to an element. Same thing, better code organization. – André Silva Jan 03 '13 at 09:42
@AndréSilva absolutely. We are in 2013, time for markup, css and script soup is long gone. :) – Fabrizio Calderan Jan 03 '13 at 09:46
1

@BeniBela: That question was answered very well [here](http://stackoverflow.com/a/2076345/1279409). – dev_row Jan 03 '13 at 09:54

score 7 · Answer 2 · answered Jan 03 '13 at 09:26

7

This:

$('.formElement').css({
        'display': 'block',
        'width': '240px',
        'position': 'relative',
        'padding': '4px 0'
    });

answered Jan 03 '13 at 09:26

Klevis Miho

851
8
15

It's just hard to do @media queries this way when it's necessary* – jfeust Dec 10 '14 at 01:44

score 3 · Accepted Answer · answered Jan 03 '13 at 09:36

Honestly, the best way may be neither. If I had to pick one, the jquery css method would be my choice, just because it's cleaner, however, consider this alternative for better performance and cleaner looking code:

Create CSS classes to append to your elements when needed. For example:

.formElementAlpha {  
  width:240px;
  padding:4px 0;
}
.formElementBravo {
  width:400px;
  height:50px;
  padding:20px 0;
  line-height:50px;
  font-size:30px;
}

then, with jquery, when you need it:

$('.formElement').addClass('formElementAlpha');

or

$('.formElement[name="bigUsernameInput"]').addClass('formElementBravo');

I would reserver the jQuery css method for instances where you need to modify a specific element based on some sort of user interaction or other dynamic event that requires you to use the value of your JavaScript variables to determine the styles you are applying. Since it looks like you already know how you want to style them, let CSS do the work.

Thank you for your detailed answer. I guess you are right about not liking either methods. I like what you propose but the thing is I am not the website developer and so, I can't create the CSS classes. I can only interact with the page through javascript... But I'll keep that in mind for other projects! — clement g, Jan 03 '13 at 09:40
Your best bet may be to adopt the method listed [here](http://stackoverflow.com/a/2076345/1279409), then, and it works in any browser I've ever come across. — dev_row, Jan 03 '13 at 09:56

score 2 · Answer 4 · edited Oct 14 '17 at 04:56

2

Your second option:

$('.formElement').css({
    'display': 'block',
    'width': '240px',
    'position': 'relative',
    'padding': '4px 0'
});

This is by far the cleanest solution!

edited Oct 14 '17 at 04:56

Shreevardhan

12,233
3
36
50

answered Jan 03 '13 at 09:26

Gaz Winter

2,924
2
25
47

score 2 · Answer 5 · edited Feb 24 '16 at 19:13

2

Use jquery .css( propertyName, value )

$('.formElement').css({
    'display': 'block',
    'width': '240px',
    'position': 'relative',
    'padding': '4px 0'
});

this is best among the solutions that you have provided.

HOWEVER I would go for creating a class with all that properties say yourCSS and add the class to that element:

$('.formElement').addClass('yourCSS');

edited Feb 24 '16 at 19:13

Grant Birchmeier

17,809
11
63
98

answered Jan 03 '13 at 09:27

bipen

36,319
9
49
62

score 1 · Answer 6 · answered Jul 28 '15 at 14:35

HTML

<style id="customCSS"> ... </style>

JS

my_html += '   .formElement {';
my_html += '       display: block;';
my_html += '       width: 240px;';
my_html += '       position: relative;';
my_html += '       padding: 4px 0;';
my_html += '   }';
$('#customCSS').html(my_html)

Best way to add new css rules with jquery?

6 Answers6