document.getElementById(…).setAttribute('style',… not working in Internet Explorer [duplicate]

Answer 1

you can use setAttribute that is also compatible with IE-8 and IE-7

 var el = document.getElementById('id' + id);
 el.setAttribute('fontWeight','bold');
 el.setAttribute('color','red');
 el.setAttribute('fontSize','150%');

for assigning a class to an element, i suggest following

 el.className = "class-name";

Answer 2

Use jQuery.

jQuery is a very powerful JavaScript library that lets you do almost anything with very little code. One of its main advantages (except for its beautiful syntax) is that it is specifically designed to be platform- and browser-independent, so you shouldn't have to worry about any of that anymore.

Doing the same thing you do now, but in jQuery, could look something like this:

function swapText(id) {
    $('#id' + id)
        .css('font-weight','bold').css('color','red').css('font-size','150%')
        .html(myarray[id][0]);
}

function originalText(id) {
    $('#id' + id).css('color','black').html(myarray[id][1]);
}

Of course, if you define a CSS class for your "swapped" style, you could simply use $('#id'+id).addClass('swapped'); and $('#id'+id).removeClass('swapped');.

Also, there are really nice ways to hook up events, so you don't even need to define the functions with names if you don't want to:

$('div').hover(function() { 
    $(this)
        .css('font-weight','bold').css('color','red').css('font-size','150%')
        .html(myarray[id][0]);
}, 
function() { 
    $('#id' + id).css('color','black').html(myarray[id][1]);
});

Answer 3

From MSDN: This attribute is not accessible through scripting. To access styles through scripting, use the style object

Answer 4

Using setAttribute is unreliable if you want the change to be reflected in the document. Use Element.style instead:

var el = document.getElementById('id' + id);
el.style.fontWeight = 'bold';
el.style.color = 'red';
el.style.fontSize = '150%';

and suchlike.