Javascript 用IE兼容的脚本替换setAttribute
我试图创建一个弹出消息，在您确认之前禁用屏幕的其余部分，仅使用CSS和JavaScript（并且不使用Javascript 用IE兼容的脚本替换setAttribute,javascript,html,setattribute,Javascript,Html,Setattribute,我试图创建一个弹出消息，在您确认之前禁用屏幕的其余部分，仅使用CSS和JavaScript（并且不使用警报功能） 尽管声明在IE8及更高版本中支持setAttribute，但它似乎无法正常工作——实际上，它似乎根本无法工作 这是我的密码： <html> <style type="text/css"> .overlay { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; backgr
警报setAttribute<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>
谢谢我也遇到了这个问题。如果您能够在站点中包含，则可以使用
$（'#overlay'）.attr（'class'，'overlay'）。jQuery对于生成跨浏览器兼容代码非常有用。在第二个示例中设置类的正确方法是：
overlaybutton.className = 'overlaybutton';
这将使类在IE中工作。就删除元素而言，我建议重新格式化事件处理附件，如下所示：
overlaybutton.onclick = deleteoverlay;
将此用作您的doctype
<!DOCTYPE html>
然后把这个放在文件的开头
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
然后享受使用setAttribute
和许多其他功能的乐趣，这些功能将允许在IE8+环境中正常工作。我不熟悉jQuery。但是，如果这是唯一的选择，我将不得不看一看。如果可以用jQuery完成，也可以不用jQuery完成。这就成功了，太棒了！现在消息窗口正确显示，单击按钮后也消失。不过，还有一件事——第一个div（应该用透明的黑色区域覆盖原始内容）没有出现在IE中，你知道为什么吗？@Imortenson没关系，找到了。这是由于背景颜色：rgba（0,0,0,0.2）；相反，我使用了背景色：#000000；不透明度：0.2；过滤器：α（不透明度=20）；现在一切都正常了。谢谢，现在我不需要维护两个独立的代码——IE和其他浏览器。
<meta http-equiv="X-UA-Compatible" content="IE=edge" />