纸牌游戏-将纸牌叠在一起

Solitaire Game- Stacking Cards on one another

本文关键字：在一起纸牌游戏更新时间：2023-11-02

下面是我想在div上放置（堆叠）卡片的代码。。但只有第一张牌被放置为-20px，其他所有牌都被放置为0px。。位置如何解决？？：(函数myFunction（）{对于（j=1；j<8；j++）{

            for(i=1;i<7;i++){
                if(j<2){
                var x = document.createElement("IMG");
                x.setAttribute("src", "AllCards/cvr.png");
                x.setAttribute("id", "r"+j);
                x.setAttribute("width", "auto");
                x.setAttribute("height", "auto");
                x.setAttribute("alt", "one");
                document.getElementById("c"+i).appendChild(x);
                alert("r"+j+" c"+i);
                //document.getElementById("r"+j).style.position = "relative";
                //document.getElementById("r"+j).style.top="20px";
                }
                else if(j<3){
                var x = document.createElement("IMG");
                x.setAttribute("src", "AllCards/cover.png");
                x.setAttribute("id", "r"+j);
                x.setAttribute("width", "auto");
                x.setAttribute("height", "auto");
                x.setAttribute("alt", "one");
                //alert("c"+i);
                //alert("r"+j+" c"+i);
                document.getElementById("c"+i).appendChild(x);
                document.getElementById("r"+j).style.position = "relative";
                document.getElementById("r"+j).style.top="-80px";
                //alert("r"+j);
                }
                /*else if(j<4){
                var x = document.createElement("IMG");
                x.setAttribute("src", "AllCards/cvr.png");
                x.setAttribute("width", "auto");
                x.setAttribute("height", "auto");
                x.setAttribute("alt", "one");
                //document.getElementById("c"+i).style.position = "relative";
                //document.getElementById("c"+i).style.top="-20px";
                document.getElementById("c"+i).appendChild(x);
                }
                else if(j<5){
                var x = document.createElement("IMG");
                x.setAttribute("src", "AllCards/cvr.png");
                x.setAttribute("width", "auto");
                x.setAttribute("height", "auto");
                x.setAttribute("alt", "one");
                //document.getElementById("c"+i).style.position = "relative";
                //document.getElementById("c"+i).style.top="-20px";
                document.getElementById("c"+i).appendChild(x);
                }
                else if(j<6){
                var x = document.createElement("IMG");
                x.setAttribute("src", "AllCards/cvr.png");
                x.setAttribute("width", "auto");
                x.setAttribute("height", "auto");
                x.setAttribute("alt", "one");
                //document.getElementById("c"+i).style.position = "relative";
                //document.getElementById("c"+i).style.top="-20px";
                document.getElementById("c"+i).appendChild(x);
                }
                else if(j<7){
                var x = document.createElement("IMG");
                x.setAttribute("src", "AllCards/cvr.png");
                x.setAttribute("width", "auto");
                x.setAttribute("height", "auto");
                x.setAttribute("alt", "one");
                //document.getElementById("c"+i).style.position = "relative";
                //document.getElementById("c"+i).style.top="-20px";
                document.getElementById("c"+i).appendChild(x);
                }
                else if(j<8){
                var x = document.createElement("IMG");
                x.setAttribute("src", "AllCards/cvr.png");
                x.setAttribute("width", "auto");
                x.setAttribute("height", "auto");
                x.setAttribute("alt", "one");
                //document.getElementById("c"+i).style.position = "relative";
                //document.getElementById("c"+i).style.top="-20px";
                document.getElementById("c"+i).appendChild(x);
                }
                */

            }
        }
    }

您是否考虑过将css类设置为属性并将您的定位细节放入其中？例如

x.setAttribute("class", "rClass");

css：

.rClass {
   top:-80px;
   position:relative;
}