谁能解释一下，为什么这段代码不起作用？
在我的 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 元素，但是点击 div 只会改变透明度(原文如此!!!)
但是如果我在页面上而不是在 js 中创建 div - 一切都很好
<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>
最佳答案
尝试先定义函数
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);
}
关于javascript - style.display 不适用于 appendChild，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35175217/