兼容IE脚本替换的setAttribute(Replace setAttribute with IE

我想创建，直到确认其禁用屏幕的其余部分的弹出消息， 只能通过使用CSS和JavaScript（和没有alert功能）。

虽然http://msdn.microsoft.com/en-us/library/ie/ms536739%28v=vs.85%29.aspx声明setAttribute在IE8的支持和更高的，它似乎并没有正常工作-好，实际上它似乎并没有在所有的工作。

这里是我的代码：

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

它工作在Firefox和Chrome，但IE（与IE9测试）似乎忽视了就好setAttribute方法，因为它只有在文字和按钮放，但没有格式（即class不适用）也可以点击新创建的按钮不删除的对象（即，或者id没有被应用，或者存在与删除对象的代码的部分一些额外的不相容性）。

我试图取代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>

但是，这一次，它甚至不添加文本和按钮。

那么，如何使这个脚本IE兼容，既显示所有的元素，然后删除它们？

谢谢

Answer 1:

使用此为您的文档类型

<!DOCTYPE html>

然后把这个文档的头部

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

然后喜欢使用setAttribute和一些其他的特征：这将允许在IE8 +环境下正常工作。

Answer 2:

设置一类在你的第二个例子正确的方法是：

overlaybutton.className = 'overlaybutton';

这将让工作在IE类。至于删除元素推移，我会建议重新格式化的事件处理，像这样附件：

overlaybutton.onclick = deleteoverlay;

Answer 3:

我遇到了这个问题为好。如果你能包括jQuery的网站上，你可以使用$('#overlay').attr('class', 'overlay'); 。 jQuery是用于制作跨浏览器兼容的代码是非常有用的。