用IE兼容脚本代替setAttribute

我试图创建一个弹出消息，直到您确认它才会禁用屏幕的其余部分，仅通过使用CSS和JavaScript（并且没有alert函数）。用IE兼容脚本代替setAttribute

尽管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兼容，既显示所有的元素，然后删除它们？

感谢

来源

2013-03-11 kaboom1

改为使用jQuery。 – Matthew 2013-03-11 00:07:43

使用此为您的文档类型

<!DOCTYPE html>

，然后把这个文档的头部

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

然后享受使用setAttribute和许多其他功能，这将允许在IE8 +环境中正常工作。

来源

2013-03-11 00:49:56

谢谢，现在我不必为IE和其他浏览器维护两个单独的代码。 – kaboom1 2013-03-11 00:55:38

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

来源

2013-03-11 00:09:32 Aiias

我对jQuery并不熟悉。但是，如果这是唯一的选择，我将不得不看看它。 – kaboom1 2013-03-11 00:20:04

如果可以用jQuery完成，可以在没有jQuery的情况下完成。 – 2015-11-13 21:51:10

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

overlaybutton.className = 'overlaybutton';

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

overlaybutton.onclick = deleteoverlay;

来源

2013-03-11 00:20:35 lmortenson

这个绝招！现在消息窗口正确显示并且在点击按钮后也消失。有一件事仍然存在 - 第一个div（它应该覆盖透明的黑色区域的原始内容）不会出现在IE中，你知道为什么吗？ – kaboom1 2013-03-11 00:33:23

@Imortenson没关系，找到它。这是由于 background-color：rgba（0,0,0,0。2）;我使用 background-color：＃000000; 不透明度：0.2; filter：alpha（opacity = 20）; 现在一切正常。 – kaboom1 2013-03-11 00:39:42

用IE兼容脚本代替setAttribute

回答

相关问题