在使用javascript删除div时,背景图像保持不变
我对div中的背景图像有问题。 我正在尝试编程一个html网络游戏,主要使用画布。因此,我的索引如下所示 在函数“drawing()”中,我做了两件事 第一个是删除所有div,我已经创建了 第二个是我正在用新的x坐标、y坐标、高度和宽度绘制所有div的新坐标。看起来是这样的在使用javascript删除div时,背景图像保持不变,javascript,html,background-image,Javascript,Html,Background Image,我对div中的背景图像有问题。 我正在尝试编程一个html网络游戏,主要使用画布。因此,我的索引如下所示 在函数“drawing()”中,我做了两件事 第一个是删除所有div,我已经创建了 第二个是我正在用新的x坐标、y坐标、高度和宽度绘制所有div的新坐标。看起来是这样的 function drawing() { delete_div(); create_div(); } function delete_div() { battlefield_div.style.r
function drawing() {
delete_div();
create_div();
}
function delete_div() {
battlefield_div.style.removeAttribute("backgroundImage", false);
battlefield_div.parentNode.removeChild(battlefield_div);
}
funtciont create_div() {
var board_div= document.createElement("div");
board_div.setAttribute("id", "board");
board_div.style.position = 'absolute';
board_div.style.top = board.y1+"px";
board_div.style.left = board.x2+"px";
board_div.style.height = board.y2 - board.y1+"px";
board_div.style.width = board.x1 - board.x2+"px";
board_div.style.zIndex = '2';
board_div.style.backgroundImage="url(resoursces/images/board.png)";
board_div.style.backgroundSize = "100% 100%";
game_object.appendChild(board_div);
}
这个游戏是一个纸牌游戏,我想让它调整大小,当你改变高度和宽度的浏览器,而不失去它的功能。我正在创建的div是功能的一部分
除了一件事之外,一切都可以使用它,只要你调整浏览器的大小,div就会被删除,新的div就会被计算出来,但是背景图像仍然存在。因此,当您调整浏览器大小4次时,您只看到背景图像
我做错了什么
有人能帮我吗?这个
.style.removeAttribute('backgroundImage',false)
语句看起来很奇怪。它甚至可以毫无例外地执行吗?否则,提供一个现场演示会很有帮助。下面是我正在做的一个例子:87.106.22.203/game如果你在浏览器上调整大小,一切都会得到新的Calculate,甚至是div。有了F12,你很容易就能看到它。但是图像仍然存在,但是。。。你可以看到你自己。好的,这是中央背景图像。作为快速测试,尝试替换行battlement\u div.style.removeAttribute(“backgroundImage”,false)代码>带战场分区隐藏=真代码>完成。现在发生了一些奇怪的事情。div_析构函数(在本例中,“delete_div”函数不再工作。div不再被删除。顺便说一下,对不起,我的英语不好,这是我的第二语言
window.onload = (function() {
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
drawing();
} resizeCanvas();
})();
function drawing() {
delete_div();
create_div();
}
function delete_div() {
battlefield_div.style.removeAttribute("backgroundImage", false);
battlefield_div.parentNode.removeChild(battlefield_div);
}
funtciont create_div() {
var board_div= document.createElement("div");
board_div.setAttribute("id", "board");
board_div.style.position = 'absolute';
board_div.style.top = board.y1+"px";
board_div.style.left = board.x2+"px";
board_div.style.height = board.y2 - board.y1+"px";
board_div.style.width = board.x1 - board.x2+"px";
board_div.style.zIndex = '2';
board_div.style.backgroundImage="url(resoursces/images/board.png)";
board_div.style.backgroundSize = "100% 100%";
game_object.appendChild(board_div);
}