Javascript document.getElementById(...).setAttribute('style',... 在 Internet Explorer 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6065609/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
document.getElementById(...).setAttribute('style',... not working in Internet Explorer
提问by John R
document.getElementById(...).setAttribute('style',... is not working in Internet Explorer 7.0. How can I make this work in Internet Explorer?
document.getElementById(...).setAttribute('style',... 在 Internet Explorer 7.0 中不起作用。如何在 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>
回答by lonesomeday
Using setAttributeis unreliable if you want the change to be reflected in the document. Use Element.styleinstead:
setAttribute如果您希望更改反映在文档中，则使用是不可靠的。使用Element.style来代替：
var el = document.getElementById('id' + id);
el.style.fontWeight = 'bold';
el.style.color = 'red';
el.style.fontSize = '150%';
and suchlike.
之类的。
回答by Tomas Aschan
Use jQuery.
使用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.
jQuery 是一个非常强大的 JavaScript 库，它可以让你用很少的代码做几乎任何事情。它的主要优点之一（除了其优美的语法）是它专门设计为独立于平台和浏览器，因此您不必再担心任何这些。
Doing the same thing you do now, but in jQuery, could look something like this:
做你现在做的同样的事情，但在 jQuery 中，可能看起来像这样：
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');.
当然，如果您为“交换”样式定义了一个 CSS 类，您可以简单地使用$('#id'+id).addClass('swapped');和$('#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]);
});
回答by Dr.Molle
回答by Asif hhh
you can use setAttribute that is also compatible with IE-8 and IE-7
您可以使用与 IE-8 和 IE-7 兼容的 setAttribute
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";
