javascript 用 IE 兼容脚本替换 setAttribute
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15329292/
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
Replace setAttribute with IE compatible script
提问by kaboom1
I am trying to create a pop-up message that disables the rest of the screen until you confirm it, only by using CSS and JavaScript(and without the alertfunction).
我正在尝试创建一个弹出消息，在您确认之前禁用屏幕的其余部分，仅通过使用 CSS 和 JavaScript（并且没有该alert功能）。
Although http://msdn.microsoft.com/en-us/library/ie/ms536739%28v=vs.85%29.aspxdeclares that setAttributeis supported in IE8 and higher, it does not seem to work correctly - well, actually it doesn't seem to work at all.
尽管http://msdn.microsoft.com/en-us/library/ie/ms536739%28v=vs.85%29.aspx声明它setAttribute在 IE8 及更高版本中受支持，但它似乎无法正常工作 - 好吧，实际上它似乎根本不起作用。
Here is my code:
这是我的代码：
<html>
<style type="text/css">
.overlay
{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.2);
}
.overlaytext
{
position: absolute;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -50px;
width: 300px;
height: 100px;
padding-top: 5px;
background-color: #777777;
color: #000000;
font-size: 20px;
text-align: center;
}
.overlaybutton
{
position: absolute;
left: 50%;
margin-left: -30px;
top: 50%;
margin-top: 20px;
width: 60px;
height: 25px;
border: solid;
border-color: #000000;
border-width: 1px;
background-color: #999999;
color: #000000;
font-size: 20px;
}
</style>
<script type="text/javascript">
function showoverlay(message)
{
var overlay = document.createElement('div');
overlay.setAttribute('id','overlay');
overlay.setAttribute('class','overlay');
document.body.appendChild(overlay);
var overlaytext = document.createElement('div');
overlaytext.setAttribute('id','overlaytext');
overlaytext.setAttribute('class','overlaytext');
overlaytext.innerHTML = message;
document.body.appendChild(overlaytext);
var overlaybutton = document.createElement('input');
overlaybutton.setAttribute('type','button');
overlaybutton.setAttribute('id','overlaybutton');
overlaybutton.setAttribute('class','overlaybutton');
overlaybutton.setAttribute('value','OK');
overlaybutton.setAttribute('onclick','deleteoverlay()');
document.body.appendChild(overlaybutton);
}
function deleteoverlay()
{
var elem = document.getElementById('overlay');
elem.parentNode.removeChild(elem);
elem = document.getElementById('overlaytext');
elem.parentNode.removeChild(elem);
elem = document.getElementById('overlaybutton');
elem.parentNode.removeChild(elem);
}
</script>
<body>
<input type="button" value="Show message" onclick="showoverlay('Message text')"/>
</body>
</html>
It works just fine in Firefox and Chrome, but IE (testing with IE9) seems to ignore the setAttributemethod, because it only puts in the text and the button, but without the formatting (i.e. classwas not applied) and also clicking the newly created button does not remove the objects (i.e. either idwas not applied, or there is some additional incompatibility with portions of the code that remove the objects).
它在 Firefox 和 Chrome 中工作得很好，但 IE（用 IE9 测试）似乎忽略了该setAttribute方法，因为它只放入文本和按钮，但没有格式（即class未应用）并且还单击了新创建的按钮不删除对象（即要么id没有应用，要么与删除对象的代码部分存在一些额外的不兼容）。
I tried to replace setAttributelike this:
我试着setAttribute像这样替换：
<script type="text/javascript">
function showoverlay(message)
{
var overlay = document.createElement('div');
overlay.id = 'overlay';
overlay.class = 'overlay';
document.body.appendChild(overlay);
var overlaytext = document.createElement('div');
overlaytext.id = 'overlaytext';
overlaytext.class = 'overlaytext';
overlaytext.innerHTML = message;
document.body.appendChild(overlaytext);
var overlaybutton = document.createElement('input');
overlaybutton.type = 'button';
overlaybutton.id = 'overlaybutton';
overlaybutton.class = 'overlaybutton';
overlaybutton.value = 'OK';
overlaybutton.onclick = 'deleteoverlay()';
document.body.appendChild(overlaybutton);
}
function deleteoverlay()
{
var elem = document.getElementById('overlay');
elem.parentNode.removeChild(elem);
elem = document.getElementById('overlaytext');
elem.parentNode.removeChild(elem);
elem = document.getElementById('overlaybutton');
elem.parentNode.removeChild(elem);
}
</script>
But this time it does not even add the text and the button.
但这一次它甚至没有添加文本和按钮。
So, how to make this script IE compatible, both showing all the elements and then removing them?
那么，如何使该脚本与 IE 兼容，既显示所有元素又删除它们？
Thanks
谢谢
回答by Travis J
Use this as your doctype
将此用作您的文档类型
<!DOCTYPE html>
and then put this in the head of the document
然后把它放在文档的头部
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
and then enjoy using setAttributeand a number of other features which this will allow to properly work on IE8+ environments.
然后享受使用setAttribute和许多其他功能，这将允许在 IE8+ 环境中正常工作。
回答by lmortenson
The correct way to set a class in your second example is:
在第二个示例中设置类的正确方法是：
overlaybutton.className = 'overlaybutton';
That will get classes working in IE. As far as deleting elements goes, I'd recommend reformatting your event handling attachment like so:
这将使类在 IE 中工作。就删除元素而言，我建议重新格式化您的事件处理附件，如下所示：
overlaybutton.onclick = deleteoverlay;
回答by Aiias
I have run into this issue as well. If you are able to include jQueryon the site, you can use $('#overlay').attr('class', 'overlay');. jQuery is extremely useful for making cross-browser compatible code.
我也遇到过这个问题。如果您能够在网站上包含jQuery，则可以使用$('#overlay').attr('class', 'overlay');. jQuery 对于制作跨浏览器兼容的代码非常有用。
