document.getElementById(...).setAttribute('style',... not working in Internet Explorer

Question

document.getElementById(...).setAttribute('style',... is not working in Internet Explorer 7.0. How can I make this work in Internet Explorer?

<!DOCTYPE html> 
<html lang="en"> 

<head>
<script type="text/javascript">
    var myarray=new Array(3);
    for (i=0; i <1000; i++){
        myarray[i]=new Array(3);
    }
    myarray[0][0]="new"; myarray[0][1]="old";

    function swapText(id){
        document.getElementById('id' + id).setAttribute('style', 'font-weight: bold; color: red; font-size:150%;');
        document.getElementById('id'+ id).innerHTML = myarray[id][0];
    }
    function originalText(id){
        document.getElementById('id' + id).setAttribute('style', 'color:' + 'black'  + ';');
        document.getElementById('id' + id).innerHTML = myarray[id][1];
    }
</script>
</head>
<body>
    <div id="scoreboard" border='1'> </div>
    <div id="qa">
        <div id="col1" class="column">  
            <div id="id0" onmouseover="swapText(0)"; onmouseout="originalText(0)">old</div>
        </div>
    </div>
</body>
</html>

doesn't really answer the questions, but you should but those css rules in a class or two, and then just add the class. — nathan gonzalez, May 19 '11 at 22:41
David, there are no errors. However, in IE, the style affects don't work... the words change in IE (from 'old' to 'new' and back), but the style changes don't work. — John R, May 19 '11 at 22:43

score 25 · Accepted Answer · answered May 19 '11 at 22:42

25

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.

answered May 19 '11 at 22:42

lonesomeday

233,373
50
316
318

It's the best solution, I guess. Is compatible with all browsers. – David Rodrigues May 19 '11 at 22:45

score 1 · Answer 2 · answered May 19 '11 at 22:47

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]);
});

Thanks Tomas. I have been putting off learning jQuerry for way to long. — John R, May 20 '11 at 02:21

score 0 · Answer 3 · answered Dec 30 '13 at 10:28

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";

score 0 · Answer 4 · answered May 19 '11 at 22:47

0

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

answered May 19 '11 at 22:47

Dr.Molle

116,463
16
195
201

document.getElementById(...).setAttribute('style',... not working in Internet Explorer

4 Answers4

Linked