Question

任何人都可以解释一下，为什么这段代码不起作用？

在我的js文件中我有：

document.addEventListener('DOMContentLoaded', function() {  
var backOverlay = document.createElement('div');
    backOverlay.id = "BackOverlay";
    backOverlay.style.cssText = 'position:absolute;width:100%;height:100%;opacity:0.7;z-index:100;background:#000;top:0;left:0;display:block';
    document.body.appendChild(backOverlay);
    if (backOverlay){
        backOverlay.addEventListener('click', toggle, false);
    }   
    });//on dom load
    toggle = function(){   
           var el = document.getElementById("BackOverlay");       
            if (el.style.display == "block"){
                el.style.display = "none";
            } else {
                el.style.display = "block";                       
            }              
        }//toggle

此代码创建div-element，但在click div上只更改透明度（sic !!!）

但如果我在页面上创建div，而不是在js中 - 一切都很好

<body>
/////page elements here///
<div id="BackOverlay" onclick="toggle();" style="position:absolute;width:100%;height:100%;opacity:0.7;z-index:100;background:#000;top:0;left:0;display:block"></div>
</body>

Answer 1

首先定义函数

toggle = function(){   
   var el = document.getElementById("BackOverlay");       
    if (el.style.display == "block"){
        el.style.display = "none";
    } else {
        el.style.display = "block";                       
    }              
}


 var backOverlay = document.createElement('div');
 backOverlay.id = "BackOverlay";
 backOverlay.style.cssText = 'position:absolute;width:100%;height:100%;opacity:0.7;z-index:100;background:#000;top:0;left:0;display:block';
 document.body.appendChild(backOverlay);
 if (backOverlay){
   backOverlay.addEventListener('click', toggle, false);
 }

Answer 2

对我而言，这两种情况都有效吗？你的确切问题是什么？

＆＃13;

var backOverlay = document.createElement('div');
backOverlay.id = "BackOverlay";
backOverlay.style.cssText = 'position:absolute;width:100%;height:100%;opacity:0.7;z-index:100;background:#000;top:0;left:0;display:block';
document.body.appendChild(backOverlay);
if (backOverlay){
    backOverlay.addEventListener('click', toggle, false);
}   

function toggle(){   
  alert("called");
       var el = document.getElementById("BackOverlay");       
        if (el.style.display == "block"){
            el.style.display = "none";
        } else {
            el.style.display = "block";                       
        }              
    }//toggle

＆＃13;

style.display不适用于appendChild

2 个答案: