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.

Jonathan Lonowski · Accepted Answer · 2008-12-05 15:51:55Z

43

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.

edited Dec 5, 2008 at 15:51

answered Dec 5, 2008 at 15:38

Jonathan Lonowski

124k35 gold badges203 silver badges202 bronze badges

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

3 Comments

Joel Coehoorn Over a year ago

Looks good: according to this page it should be compatible: quirksmode.org/dom/w3c_css.html You'll get an upvote out of this, and maybe an accepted answer, but I'm gonna wait a while so that the question stays on the unanswered view a little longer.

Tomalak Over a year ago

Simple and efficient. +1 (I was unaware of the cssText property, that's very useful, thanks!)

BlackMael Over a year ago

That is handy. I too was anaware of cssText.

scunliffe · Accepted Answer · 2008-12-05 16:36:01Z

25

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.

answered Dec 5, 2008 at 16:36

scunliffe

63.8k26 gold badges132 silver badges168 bronze badges

1 Comment

traditional Over a year ago

Although this will work, it will override any previous styles set on DOMElement. If need to preserve old styles, use of DOMElement.style is recommended.

Tomalak · Accepted Answer · 2008-12-05 16:08:33Z

5

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

answered Dec 5, 2008 at 16:08

Tomalak

339k68 gold badges547 silver badges635 bronze badges

Comments

annakata · Accepted Answer · 2008-12-05 15:36:47Z

2

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.

answered Dec 5, 2008 at 15:36

annakata

76k18 gold badges116 silver badges181 bronze badges

2 Comments

Joel Coehoorn Over a year ago

It's not using classes that gets the -1. It's that the question mentioned a lot of old pages that already have inline styles. Obviously for new work a class is preferrable.

annakata Over a year ago

cannot believe I got -3 for this

Eric Leschinski · Accepted Answer · 2013-10-26 03:27:40Z

2

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.

edited Oct 26, 2013 at 3:27

Eric Leschinski

155k96 gold badges423 silver badges337 bronze badges

answered Dec 5, 2008 at 15:37

BlackMael

3,2185 gold badges27 silver badges43 bronze badges

Comments

Josh · Accepted Answer · 2008-12-05 15:32:30Z

0

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

answered Dec 5, 2008 at 15:32

Josh

18.9k7 gold badges55 silver badges73 bronze badges

2 Comments

Joel Coehoorn Over a year ago

Sometimes there's more involved than just the background color or a single class.

Josh Over a year ago

You can only set one property in a single statement if you are avoiding class. Basically extend what I suggested and set the X properties you want to modify. There are a lot of compliance issues but generally just set style.backgroundColor and style.foregroundColor

Theraot · Accepted Answer · 2016-06-30 03:48:32Z

0

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.

edited Jun 30, 2016 at 3:48

Theraot

41.2k7 gold badges70 silver badges107 bronze badges

answered Dec 5, 2008 at 15:33

Victor

4,7311 gold badge28 silver badges31 bronze badges

Collectives™ on Stack Overflow

Set HTML element's style property in javascript

7 Answers 7

3 Comments

1 Comment

Comments

2 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

1 Comment

Comments

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related