如何使用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-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();