Best way to add new css rules with jquery?

Question

I am dynamically pasting some html into a webpage (after I detected an event from the user). This html needs some css style style, and I am wondering if this is the cleanest way to do this using jQuery. I am not a website developer, so I cannot add these rules to the original css.

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

 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 best / clean?

EDIT:

Since I cannot directly add rules to CSS, I will stick with the jQuery css method. Some other related issues also provide solutions:

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

I cannot use jQuery plugins, but if I could, I would of course use jQuery.Rule

Thank you all for your precious help.

Answer 1

Honestly, the best way might not be the one. If I had to choose one, the jQuery css method would be my choice, simply because it was clean, however, considered this alternative for better performance and cleaner code:

Create CSS classes to add 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 re-request the jQuery css method for instances where you need to change a specific element based on some kind of user interaction or other dynamic event that requires using the values ​​of your JavaScript variables to determine the styles that you are using the application. Since it looks like you already know how you want to style them, let CSS do the job.

Answer 2

Do not mix css and js together, especially if your properties do not contain calculated 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'); 

Answer 3

It:

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

Answer 4

The second option:

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

This is by far the cleanest solution!

Answer 5

Use jquery . css (propertyName, value)

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

this is the best among the solutions you have provided.

HOWEVER . I would like to create a class with all the properties specified by yourCSS and add the class to this element:

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

Answer 6

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)