Adding CSS using jquery

Question

I have a form and its attributes.Now I have to add CSS dynamically to each attribute html attribute like text, textarea, checkbox, dropdown.

I also have another separate block which displays possible CSS attributes for adding CSS to form like font,font-style,width,padding for each html attribute. What is the best way of adding CSS to form via jquery. Mere adding normal CSS jquery like,

$( this ).css( "color", "red" ); 

to the form creates a lot of work. Is there any plugin in jquery that supports mainly for CSS related tasks. Or should I go with .css() jquery attribute itself. I need to add CSS to the form via inline. I will then save it.

Answer 1

Have you consider this approach? :

$(this).addClass("classname");

It is much easier to manage CSS tags with this rather than using $(element).css many times.

Answer 2

$( this ).css( "color", "red" ). css("minWidth", "100%"); 

or

$( this ).css({ color : 'red', minWidth: '100' });

CssObject properties are the same as CSS properties but in camel case. Remove any - then transform in upper case the next letter, eg:

CSS property

border-bottom-width : 10px;

JQuery CSS Object Property

borderBottomWidth : '10px'