Set HTML element s style property in javascript

Question

I have a bunch of old classic ASP pages  many of which show database data in tables   None of the pages have any sorting functionality built in  you are at the mercy of whatever ORDER BY clause the original developer saw fit to use   I m working on a quick fix to tack on sorting via client-side javascript   I have a script already written that mostly does what I need   However  I still need to add one bit of functionality   The table rows in these pages will often have alternating row colors  and the mechanism used to achieve this varies among the pages   It might be as simple as changing a CSS class or the styles may have been rendered inline by the ASP code   Right now after sorting the table each row keeps the coloring scheme is was rendered with and so the alternating rows no longer alternate   I was hoping to fix it with something simple like this       table  is a var for the table element I m sorting     I ve already verified it exists  and that there are at least three rows     At this point the first row  index 0  is always the header row          check for alternating row styles  var RowStyle   table rows 1  style  var AltStyle   table rows 2  style      SORT HAPPENS HERE       snip       Apply alternating row styles if  RowStyle     AltStyle  return true   for  var i 1 il table rows length i lt il i  1        if  i 2  0  table rows i  style RowStyle      else table rows i  style AltStyle                       Unfortunately  you can t just set to an element s style property like this   It complains that the object has no setter   How else can I do this simply   No frameworks like jQuery allowed here- that s out of my hands   Update  While it would be the best solution  it s just not practical to refactor 100  pages to all use classes rather than inline style   Also  sometimes there s more involved than just the background color   For example  a row may be much darker or lighter than the alternating row  with one style having a different foreground color as well to accommodate   Or an alternating style may set borders differently   I really don t know what is used on all of these pages  so I need something that will generically apply all styles from one row to another

User · Answer

If you just want to change the color of the row  you could just access the style backgroundColor property and set it   Here is a quick link to a CSS property to JS conversion

User · Answer

The DOM element style  property  is a readonly collection of all the style attributes defined on the element    The collection property is readonly  not necessarily the items within the collection    You would be better off using the className  property  on the elements

User · Answer

I d like to note that it s usually preferable to change the class of the node instead of it s style and let CSS handle what that means

User · Answer

Don t set the style object itself  set the background color property of the style object that is a property of the element   And yes  even though you said no  jquery and tablesorter with its zebra stripe plugin can do this all for you in 3 lines of code   And just setting the class attribute would be better since then you have non-hard-coded control over the styling which is more organized

User · Answer

For me  this works   function transferAllStyles elemFrom  elemTo      var prop    for  prop in elemFrom style      if  typeof prop     string         try   elemTo style prop    elemFrom style prop           catch  ex       don t care

User · Answer

The DOM element style  property  is a readonly collection of all the style attributes defined on the element    The collection property is readonly  not necessarily the items within the collection    You would be better off using the className  property  on the elements

User · Answer

Don t set the style object itself  set the background color property of the style object that is a property of the element   And yes  even though you said no  jquery and tablesorter with its zebra stripe plugin can do this all for you in 3 lines of code   And just setting the class attribute would be better since then you have non-hard-coded control over the styling which is more organized

User · Answer

For me  this works   function transferAllStyles elemFrom  elemTo      var prop    for  prop in elemFrom style      if  typeof prop     string         try   elemTo style prop    elemFrom style prop           catch  ex       don t care

User · Answer

If you just want to change the color of the row  you could just access the style backgroundColor property and set it   Here is a quick link to a CSS property to JS conversion

User · Answer

You can try grabbing the cssText and className   var css1   table rows 1  style cssText  var css2   table rows 2  style cssText  var class1   table rows 1  className  var class2   table rows 2  className      sort     loop     if  i 2  0            table rows i  style cssText   css1          table rows i  className   class1        else           table rows i  style cssText   css2          table rows i  className   class2          Not entirely sure about browser compatibility with cssText  though

User · Answer

I d like to note that it s usually preferable to change the class of the node instead of it s style and let CSS handle what that means

User · Answer

You can try grabbing the cssText and className   var css1   table rows 1  style cssText  var css2   table rows 2  style cssText  var class1   table rows 1  className  var class2   table rows 2  className      sort     loop     if  i 2  0            table rows i  style cssText   css1          table rows i  className   class1        else           table rows i  style cssText   css2          table rows i  className   class2          Not entirely sure about browser compatibility with cssText  though

User · Answer

Don t set the style object itself  set the background color property of the style object that is a property of the element   And yes  even though you said no  jquery and tablesorter with its zebra stripe plugin can do this all for you in 3 lines of code   And just setting the class attribute would be better since then you have non-hard-coded control over the styling which is more organized

User · Answer

I d like to note that it s usually preferable to change the class of the node instead of it s style and let CSS handle what that means

User · Answer

For me  this works   function transferAllStyles elemFrom  elemTo      var prop    for  prop in elemFrom style      if  typeof prop     string         try   elemTo style prop    elemFrom style prop           catch  ex       don t care

User · Answer

For me  this works   function transferAllStyles elemFrom  elemTo      var prop    for  prop in elemFrom style      if  typeof prop     string         try   elemTo style prop    elemFrom style prop           catch  ex       don t care

User · Answer

Don t set the style object itself  set the background color property of the style object that is a property of the element   And yes  even though you said no  jquery and tablesorter with its zebra stripe plugin can do this all for you in 3 lines of code   And just setting the class attribute would be better since then you have non-hard-coded control over the styling which is more organized

User · Answer

The DOM element style  property  is a readonly collection of all the style attributes defined on the element    The collection property is readonly  not necessarily the items within the collection    You would be better off using the className  property  on the elements

User · Answer

You can set the style attribute of any element    the trick is that in IE you have to do it differently   bug 245     Standards base browsers elem setAttribute  style   styleString      Non Standards based IE browser elem style setAttribute  cssText   styleString     Note that in IE8  in Standards Mode  the first way does work

User · Answer

If you just want to change the color of the row  you could just access the style backgroundColor property and set it   Here is a quick link to a CSS property to JS conversion

User · Answer

I d like to note that it s usually preferable to change the class of the node instead of it s style and let CSS handle what that means

User · Answer

You can set the style attribute of any element    the trick is that in IE you have to do it differently   bug 245     Standards base browsers elem setAttribute  style   styleString      Non Standards based IE browser elem style setAttribute  cssText   styleString     Note that in IE8  in Standards Mode  the first way does work

User · Answer

You can try grabbing the cssText and className   var css1   table rows 1  style cssText  var css2   table rows 2  style cssText  var class1   table rows 1  className  var class2   table rows 2  className      sort     loop     if  i 2  0            table rows i  style cssText   css1          table rows i  className   class1        else           table rows i  style cssText   css2          table rows i  className   class2          Not entirely sure about browser compatibility with cssText  though

User · Answer

You can set the style attribute of any element    the trick is that in IE you have to do it differently   bug 245     Standards base browsers elem setAttribute  style   styleString      Non Standards based IE browser elem style setAttribute  cssText   styleString     Note that in IE8  in Standards Mode  the first way does work

User · Answer

If you just want to change the color of the row  you could just access the style backgroundColor property and set it   Here is a quick link to a CSS property to JS conversion

User · Answer

You can set the style attribute of any element    the trick is that in IE you have to do it differently   bug 245     Standards base browsers elem setAttribute  style   styleString      Non Standards based IE browser elem style setAttribute  cssText   styleString     Note that in IE8  in Standards Mode  the first way does work

User · Answer

You can try grabbing the cssText and className   var css1   table rows 1  style cssText  var css2   table rows 2  style cssText  var class1   table rows 1  className  var class2   table rows 2  className      sort     loop     if  i 2  0            table rows i  style cssText   css1          table rows i  className   class1        else           table rows i  style cssText   css2          table rows i  className   class2          Not entirely sure about browser compatibility with cssText  though

User · Answer

The DOM element style  property  is a readonly collection of all the style attributes defined on the element    The collection property is readonly  not necessarily the items within the collection    You would be better off using the className  property  on the elements

[javascript] Set HTML element's style property in javascript

Examples related to javascript

Examples related to html

Examples related to styles