gpt4 book ai didi

javascript - style.display 不适用于 appendChild

转载 作者:行者123 更新时间:2023-11-28 06:27:33 26 4
gpt4 key购买 nike

谁能解释一下,为什么这段代码不起作用?

在我的 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com