如何在 JS 中编写 CSS？

Question

我想做一个记忆游戏。 我想为 JS 中的翻转编写一个 CSS 动画，这样我就可以调用一个函数，因为我想制作一个 onclick 动画而不是悬停动画。

如何在 Javascript 中使用 oncklicked 函数制作 CSS 翻转动画？

 var card = "<div class='flip-card'><div class='flip-card-inner'><div class='flip-card-front'><button id='button'onclick='Flipfront()'style='width:300px;height:300px; marign:50px; background-image:url(Frontpage.jpg);'></button></div><div class='flip-card-back'><button id='button2' onclick='Flipback()'style='width:300px;height:300px; marign:50px; background-image:url(IMG1.jpg);'></button></div></div></div>" for (let i = 0; i < 20; i++) { document.querySelector("#container").innerHTML += card; } function Flipfront() { // ? } function Flipback() { // ? }

 .flip-card { background-color: transparent; width: 300px; height: 200px; border: 1px solid #f1f1f1; perspective: 1000px; /* Remove this if you don't want the 3D effect */ } /* This container is needed to position the front and back side */ .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; } /* Do an horizontal flip when you move the mouse over the flip box container */ .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } /* Position the front and back side */ .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; } /* Style the front side (fallback if image is missing) */ .flip-card-front { background-color: #bbb; color: black; } /* Style the back side */ .flip-card-back { transform: rotateY(180deg); }

 <div id="outerbackground"> <img src="background.jpg" class="backgorund" border="1" id="BG"> </div> <div id="container"></div>

Answer 1

为了进一步详细说明我的评论：您可以使用一个类来控制卡片的翻转状态，而不是使用:hover ，比如.flipped 。

然后，在Flipfront()和Flipback()方法中，确保您接受将从您的标记传入的参数，该参数将作为Flipfront(this)或Flipback(this)调用。 这将允许您访问触发它的元素。

然后，只需使用Element.closest()访问.flip-card父级，并使用Element.classList.add()或Element.classList.remove()切换flipped类：

 var card = "<div class='flip-card'><div class='flip-card-inner'><div class='flip-card-front'><button id='button'onclick='Flipfront(this)'style='width:300px;height:300px; marign:50px; background-image:url(Frontpage.jpg);'></button></div><div class='flip-card-back'><button id='button2' onclick='Flipback(this)'style='width:300px;height:300px; marign:50px; background-image:url(IMG1.jpg);'></button></div></div></div>" for (let i = 0; i < 20; i++) { document.querySelector("#container").innerHTML += card; } function Flipfront(el) { el.closest('.flip-card').classList.add('flipped'); } function Flipback(el) { el.closest('.flip-card').classList.remove('flipped'); }

 .flip-card { background-color: transparent; width: 300px; height: 200px; border: 1px solid #f1f1f1; perspective: 1000px; /* Remove this if you don't want the 3D effect */ } /* This container is needed to position the front and back side */ .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; } /* Do an horizontal flip when you move the mouse over the flip box container */ .flip-card.flipped .flip-card-inner { transform: rotateY(180deg); } /* Position the front and back side */ .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; } /* Style the front side (fallback if image is missing) */ .flip-card-front { background-color: #bbb; color: black; } /* Style the back side */ .flip-card-back { transform: rotateY(180deg); }

 <div id="outerbackground"> <img src="background.jpg" class="backgorund" border="1" id="BG"> </div> <div id="container"></div>

Answer 2

您是否尝试过单击时动态更改类？ 单击元素时，您可以使用classlist属性及其方法添加类.flip-card-inner并删除 '.flip-card-front`

用法是：

elem.classList.add("flip-card-inner");

elem.classList.remove("flip-card-front");

Answer 3

不要在 JS 中编写 CSS。 相反，只需将:hover规则更改为取决于您在单击每个.flip-card时切换的类。

另请注意，您不应该使用onX属性，因为由于违反了关注点分离原则，它们已过时且实践不佳。 而是使用不显眼的事件处理程序。 内联style属性也是如此。 将这些规则移到外部样式表中。 这是一个工作示例：

 let card = '<div class="flip-card"><div class="flip-card-inner"><div class="flip-card-front"><button id="button"></button></div><div class="flip-card-back"><button id="button2"></button></div></div></div>'; for (let i = 0; i < 20; i++) { document.querySelector("#container").innerHTML += card; } document.querySelectorAll('.flip-card').forEach(el => { el.addEventListener('click', () => el.classList.toggle('flipped')); });

 .flip-card { background-color: transparent; width: 300px; height: 200px; border: 1px solid #f1f1f1; perspective: 1000px; } .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; } /* remove :hover here */ .flip-card.flipped .flip-card-inner { transform: rotateY(180deg); } .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; } .flip-card-front { background-color: #bbb; color: black; } .flip-card-back { transform: rotateY(180deg); } #button { width: 300px; height: 300px; background-image: url(Frontpage.jpg); } #button2 { width: 300px; height: 300px; background-image: url(IMG1.jpg); }

 <div id="outerbackground"> <img src="background.jpg" class="backgorund" border="1" id="BG"> </div> <div id="container"></div>