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<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.

Answer 1

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

Answer 2

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:

http://codepunk.hardwar.org.uk/css2js.htm

Answer 3

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.

Answer 4

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.

I assume you are defining the "style" of each row/cell by specifying the class attribute and not using just the style attribute of the TR/TD tags.

UPDATE: Then you'll have to store each style.property that you do care about individually as you process each row and set the element.style["property"] accordingly.

Answer 5

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.

Answer 6

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 */ }
}

Answer 7

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.