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.

I have a seperate block for adding css. That block has many input boxes with each attribute like font-style,padding,width. Each time adding css to it using .css() will take a large script. — Ganesh Babu
– Ganesh Babu, Commented Sep 27, 2013 at 9:59
Use like this $(this).css({ "color":"red", "font":"12px","width":"100px" }) — Saranya Sadhasivam
– Saranya Sadhasivam, Commented Sep 27, 2013 at 10:04

Mark Esluzar Diamat · Accepted Answer · 2013-09-27 10:09:22Z

2

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.

answered Sep 27, 2013 at 10:09

Mark Esluzar Diamat

6125 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TecHunter · Accepted Answer · 2013-09-27 10:09:55Z

1

$( 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'

answered Sep 27, 2013 at 10:09

TecHunter

6,1712 gold badges32 silver badges47 bronze badges

Collectives™ on Stack Overflow

Adding CSS using jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related