CODEWITHSUNDEEP
javascriptjquerycss
clement g
clement g

Reputation: 451

Best way to add new css rules with jquery?

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.

Upvotes: 9

Views: 21422

Answers (6)

Gaz Winter
Gaz Winter

Reputation: 2989

Your second option:

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

This is by far the cleanest solution!

Upvotes: 2

bipen
bipen

Reputation: 36551

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');

Upvotes: 2

Mohammed Magdy
Mohammed Magdy

Reputation: 11

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)

Upvotes: 1

dev_row
dev_row

Reputation: 162

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.

Upvotes: 3

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123428

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');

Upvotes: 10

Klevis Miho
Klevis Miho

Reputation: 859

This:

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

Upvotes: 7

Related Questions