Menu
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>
300
Element.setAttribute() Sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value. To get the current value of an attribute, use getAttribute() ; to remove an attribute, call removeAttribute() .
Another way to change or create an attribute is to use a method like element. setAttribute("attribute", "value") or element. createAttribute("attribute", "value"). Use setAttribute to change an attribute that has been defined before.
JavaScript setAttribute() The setAttribute() method is used to set or add an attribute to a particular element and provides a value to it. If the attribute already exists, it only set or changes the value of the attribute. So, we can also use the setAttribute() method to update the existing attribute's value.
You can call getElementById multiple times and it will work.
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.
178
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]);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
