要实现背景颜色改变时按钮中的图像也随之改变,可以使用Bootstrap的自定义样式和JavaScript来实现。以下是一个示例解决方法:
HTML代码:
CSS代码:
.btn-primary.my-custom-color {
background-color: #ff0000; /* 自定义背景颜色 */
}
.my-custom-color #myIcon {
color: #ffffff; /* 自定义图像颜色 */
}
JavaScript代码:
var myButton = document.getElementById("myButton");
myButton.addEventListener("click", function() {
myButton.classList.toggle("my-custom-color");
});
在上面的代码中,我们首先定义了一个带有图像的Bootstrap按钮。然后,我们使用CSS创建了一个自定义样式.my-custom-color
,其中定义了自定义的背景颜色和图像颜色。最后,我们使用JavaScript监听按钮的点击事件,并在点击时切换自定义样式类my-custom-color
。
通过这种方式,当按钮被点击时,背景颜色将改变,并且按钮中的图像颜色也会相应地改变。你可以根据需要修改自定义样式和图像图标来适应你的项目。