如何使用JavaScript更改CSS伪类元素

Question

我想使用javascript更改此图片：

 dance:active { background-image: url("myImage.png") }

您可以使用

document.getElementById(element).style.backgroundImage = url(image);

改变

#element {background-image: url(image)}

我想使用javascript更改元素处于活动状态时的图像。谢谢！

Answer 1

我明白了！

您的CSS中可以有多个类：

element.dance1 { stuff }
element.dance1:active { active stuff }
element.dance2 { stuff 2 }
element.dance2:active { active stuff 2 }

然后在javascript中更改元素的类：

document.getElementById(element).className = dance1/dance2

Answer 2

您可以尝试使用jQuery来实现您想要的功能。 dance: active是CSS Pseudo-classes。详细了解Pseudo-class。

当鼠标按下时，演示会更改div颜色，并在鼠标向上时将颜色切换回来。如果这不是您想要的，请留下评论。

$("#dance").on("mousedown", function () {
    $("#dance").css("background", "blue");
}).on("mouseup", function(){
    $("#dance").css("background", "black");
});

https://jsfiddle.net/x_li/5nkvms8q/

和jQuery也可以执行以下操作

$('#damce:checked').val();