CSS 使用 jQuery toggleClass 转换

Question

我有这样的想法

单击按钮时，jquery 切换 class:

.trans {
    background-color: #ABC;
    transform: translateX(100px) scale(0.5) rotate(180deg);
}

在<div class="container2">

当您再次单击该按钮时，class 再次切换并且 div 变为黑色并且 returns 回到其原始位置。

当我使用 jquery 添加负责 transform 的样式时，使用以下代码：

$('.trans').css({"transform":"translateX(100px) scale(0.5) rotate(180deg)"});

我得到这样的结果：

问题：点击div变形，再次点击不变形，只是变回颜色。

这是为什么？在 css 样式表中声明它和使用 jQuery 添加它有什么区别？

Answer 1

当您使用 jQuery 选择器 .trans 时，您不会将样式添加到 class（就像使用 CSS），而是添加到 DOM-元素。因此，当您删除 class 时，样式不会删除。

如果您想使用 jQuery 更改 CSS，您可以将样式元素附加到 body。像这样：

$('<style>.trans { transform: translateX(100px) scale(0.5) rotate(180deg); }</style>').appendTo('body');

CSS transform using jQuery toggleClass