用IE兼容脚本替换setAttribute [英] Replace setAttribute with IE compatible script
问题描述
我试图创建一个弹出消息，直到您确认为止，才会禁用屏幕的其余部分，仅通过使用CSS和JavaScript （并且没有 alert function）。
尽管 http://msdn.microsoft.com/en-us/library/ie/ms536739%28v=vs.85%29.aspx 声明在IE8及更高版本中支持 setAttribute ，它似乎不能正常工作 - 呃，实际上它似乎根本无法工作。
以下是我的代码：
< html>
< style type =text / css>
.overlay
{
position：absolute;
left：0px;
top：0px;
宽度：100％;
身高：100％;
background-color：rgba（0,0,0,0.2）;
}
.overlaytext
{
position：absolute;
剩下：50％;
margin-left：-150px;
top：50％;
margin-top：-50px;
width：300px;
height：100px;
padding-top：5px;
背景颜色：＃777777;
颜色：＃000000;
font-size：20px;
text-align：center;
}
.overlaybutton
{
position：absolute;
剩下：50％;
margin-left：-30px;
top：50％;
margin-top：20px;
width：60px;
height：25px;
border：solid;
border-color：＃000000;
border-width：1px;
背景颜色：＃999999;
颜色：＃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 =buttonvalue =显示消息onclick =showoverlay（'消息文本'）/>
< / body>
< / html>
它在Firefox和Chrome中运行良好，但IE（测试IE9）似乎忽略了 setAttribute 方法，因为它只放入文本和按钮，但没有格式化（例如 class 未应用）并且单击新创建的按钮不会删除对象（即未应用 id 或与删除对象的代码部分不兼容）。
我试图用
<$替换 setAttribute p $ p> < 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兼容，既显示所有元素，然后将其删除？
谢谢
使用这个作为你的doctype
<！DOCTYPE html>
然后将其放在文档的头部
< meta http-equiv =X-UA-Compatiblecontent =IE = edge/>
然后使用 setAttribute 和一个数字的其他功能，这将允许在IE8 +环境中正常工作。
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 alert function).
Although http://msdn.microsoft.com/en-us/library/ie/ms536739%28v=vs.85%29.aspx declares that setAttribute is supported in IE8 and higher, it does not seem to work correctly - well, actually it doesn't seem to work at all.
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 setAttribute method, because it only puts in the text and the button, but without the formatting (i.e. class was not applied) and also clicking the newly created button does not remove the objects (i.e. either id was not applied, or there is some additional incompatibility with portions of the code that remove the objects).
I tried to replace setAttribute like this:
<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?
Thanks
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 setAttribute and a number of other features which this will allow to properly work on IE8+ environments.
这篇关于用IE兼容脚本替换setAttribute的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
