How to define multiple CSS attributes in jQuery

Question

Is there any syntactical way in jQuery to define multiple CSS attributes without stringing everything out to the right like this       message   css  width    550px   css  height    300px   css  font-size    8pt      If you have  say  20 of these your code will become hard to read  any solutions   From jQuery API  for example  jQuery understands and returns the correct value for both    css    background-color     ffe    border-left    5px solid  ccc        and    css  backgroundColor    ffe   borderLeft   5px solid  ccc        Notice that with the DOM notation  quotation marks around the property names are optional  but with CSS notation they re required due to the hyphen in the name

User · Answer

Best way is to use variable  var style1         font-size     10px       width     30px       height     10px        quot  message quot   css style1

User · Answer

Pass it as an Object           css        property    value         property    value        http   docs jquery com CSS css properties

User · Answer

Try this    element  css        propertyName1   propertyValue1        propertyName2   propertyValue2

User · Answer

Agree with redsquare however it is worth mentioning that if you have a two word property like text-align you would do this       message   css   width   30px   height   10px    text-align    center

User · Answer

message   css   width     550px    height     300px    font-size     8pt       Also  it may be better to use jQuery s built in addClass to make your project more scalable    Source  How To  jQuery Add CSS and Remove CSS

User · Answer

Try this    element  css        propertyName1   propertyValue1        propertyName2   propertyValue2

User · Answer

if you want to change multiple css attributes then you have to use object structure as below     document  ready function           message   css                       background-color     0F0                       color   red                       font-family   verdana                            but it get worse when we want to change lots of style  so what i suggest to you is adding a class instead of changing css using jQuery  and adding a class is more readable too   see below example   CSS   lt style gt       custom-class         font-weight  bold         background   f5f5f5         text-align  center         font-size  18px         color red         lt  style gt    jQuery     document  ready function           message   addclass  custom-class          One advantage of latter example over former is if you want to add some css onclick of something and want to remove that css on second click then in latter example you can use  toggleClass  custom-class    where in former example you have to set all css with different values which you have set before and it will be complicated  so using class option will be better solution

User · Answer

please try this     document  ready function            message   css   color   red   font-family   verdana

User · Answer

please try this     document  ready function            message   css   color   red   font-family   verdana

User · Answer

message   css   width  550  height  300   font-size    8pt

User · Answer

Pass it as an Object           css        property    value         property    value        http   docs jquery com CSS css properties

User · Answer

Better to just use  addClass   and  removeClass   even if you have 1 or more styles to change  It s more maintainable and readable  If you really have the urge to do multiple CSS properties  then use the following   css       font-size     10px       width     30px       height     10px       NB  Any CSS properties with a hyphen need to be quoted  I ve placed the quotes so no one will need to clarify that  and the code will be 100  functional

User · Answer

message   css   width  550  height  300   font-size    8pt

User · Answer

Using a plain object  you can pair up strings that represent property names with their corresponding values  Changing the background color  and making text bolder  for instance would look like this         message   css        background-color     0F0         font-weight         bolder        Alternatively  you can use the JavaScript property names too       message   css       backgroundColor   rgb 128  115  94        fontWeight        700        More information can be found in jQuery s documentation

User · Answer

Better to just use  addClass   and  removeClass   even if you have 1 or more styles to change  It s more maintainable and readable  If you really have the urge to do multiple CSS properties  then use the following   css       font-size     10px       width     30px       height     10px       NB  Any CSS properties with a hyphen need to be quoted  I ve placed the quotes so no one will need to clarify that  and the code will be 100  functional

User · Answer

Script     IDname  css        background    000        color    000       Html   lt div id  hello  gt  lt  div gt

User · Answer

Pass it as an Object           css        property    value         property    value        http   docs jquery com CSS css properties

User · Answer

You can also use attr along with style       message   attr  style    width 550  height 300  font-size 8px

User · Answer

Best way is to use variable  var style1         font-size     10px       width     30px       height     10px        quot  message quot   css style1

User · Answer

if you want to change multiple css attributes then you have to use object structure as below     document  ready function           message   css                       background-color     0F0                       color   red                       font-family   verdana                            but it get worse when we want to change lots of style  so what i suggest to you is adding a class instead of changing css using jQuery  and adding a class is more readable too   see below example   CSS   lt style gt       custom-class         font-weight  bold         background   f5f5f5         text-align  center         font-size  18px         color red         lt  style gt    jQuery     document  ready function           message   addclass  custom-class          One advantage of latter example over former is if you want to add some css onclick of something and want to remove that css on second click then in latter example you can use  toggleClass  custom-class    where in former example you have to set all css with different values which you have set before and it will be complicated  so using class option will be better solution

User · Answer

You can use      selector   css   width  16px    color    green    margin    0       The best way is to use    selector   addClass  custom-class   and   custom-class  width 16px  color  green  margin  0

User · Answer

You Can Try This     p first   css  background-color     B2E0FF   css  border    3px solid red

User · Answer

You Can Try This     p first   css  background-color     B2E0FF   css  border    3px solid red

User · Answer

Script     IDname  css        background    000        color    000       Html   lt div id  hello  gt  lt  div gt

User · Answer

Using a plain object  you can pair up strings that represent property names with their corresponding values  Changing the background color  and making text bolder  for instance would look like this         message   css        background-color     0F0         font-weight         bolder        Alternatively  you can use the JavaScript property names too       message   css       backgroundColor   rgb 128  115  94        fontWeight        700        More information can be found in jQuery s documentation

User · Answer

Agree with redsquare however it is worth mentioning that if you have a two word property like text-align you would do this       message   css   width   30px   height   10px    text-align    center

User · Answer

Agree with redsquare however it is worth mentioning that if you have a two word property like text-align you would do this       message   css   width   30px   height   10px    text-align    center

User · Answer

Better to just use  addClass   and  removeClass   even if you have 1 or more styles to change  It s more maintainable and readable  If you really have the urge to do multiple CSS properties  then use the following   css       font-size     10px       width     30px       height     10px       NB  Any CSS properties with a hyphen need to be quoted  I ve placed the quotes so no one will need to clarify that  and the code will be 100  functional

User · Answer

Pass it as an Object           css        property    value         property    value        http   docs jquery com CSS css properties

User · Answer

message   css   width     550px    height     300px    font-size     8pt       Also  it may be better to use jQuery s built in addClass to make your project more scalable    Source  How To  jQuery Add CSS and Remove CSS

User · Answer

You can also use attr along with style       message   attr  style    width 550  height 300  font-size 8px

User · Answer

Using a plain object  you can pair up strings that represent property names with their corresponding values  Changing the background color  and making text bolder  for instance would look like this         message   css        background-color     0F0         font-weight         bolder        Alternatively  you can use the JavaScript property names too       message   css       backgroundColor   rgb 128  115  94        fontWeight        700        More information can be found in jQuery s documentation

User · Answer

Using a plain object  you can pair up strings that represent property names with their corresponding values  Changing the background color  and making text bolder  for instance would look like this         message   css        background-color     0F0         font-weight         bolder        Alternatively  you can use the JavaScript property names too       message   css       backgroundColor   rgb 128  115  94        fontWeight        700        More information can be found in jQuery s documentation

User · Answer

Agree with redsquare however it is worth mentioning that if you have a two word property like text-align you would do this       message   css   width   30px   height   10px    text-align    center

User · Answer

You can use      selector   css   width  16px    color    green    margin    0       The best way is to use    selector   addClass  custom-class   and   custom-class  width 16px  color  green  margin  0

User · Answer

Better to just use  addClass   and  removeClass   even if you have 1 or more styles to change  It s more maintainable and readable  If you really have the urge to do multiple CSS properties  then use the following   css       font-size     10px       width     30px       height     10px       NB  Any CSS properties with a hyphen need to be quoted  I ve placed the quotes so no one will need to clarify that  and the code will be 100  functional

User · Answer

message   css   width  550  height  300   font-size    8pt

User · Answer

message   css   width  550  height  300   font-size    8pt

[jquery] How to define multiple CSS attributes in jQuery?

Examples related to jquery

Examples related to css