javascript - Best way to add new css rules with jquery? - Stack Overflow

admin管理员组

文章数量:1181439

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:

• Create a CSS rule / class with jQuery at runtime
• Changing CSS Rules using JavaScript or jQuery

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

Thank you all for your precious help.

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:

• Create a CSS rule / class with jQuery at runtime
• Changing CSS Rules using JavaScript or jQuery

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

Thank you all for your precious help.

• javascript
• jquery
• css

Share Improve this question Follow edited May 23, 2017 at 12:25 CommunityBot 111 silver badge asked Jan 3, 2013 at 9:24 clement gclement g 45111 gold badge33 silver badges1010 bronze badges 2

• Your second code will not work if you add more elements with that class later. – Dogbert Commented Jan 3, 2013 at 9:27
• Also consider that second option will have more specificity as it is inline. – scottlimmer Commented Jan 3, 2013 at 9:27

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 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');

This:

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

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.

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

Your second option:

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

This is by far the cleanest solution!

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)

本文标签： javascriptBest way to add new css rules with jqueryStack Overflow