背景颜色改变时，Bootstrap按钮中的图像也随之改变，而不是按钮颜色。_编程开发

背景颜色改变时，Bootstrap按钮中的图像也随之改变，而不是按钮颜色。

创始人

2024-11-28 16:31:06

0次

要实现背景颜色改变时按钮中的图像也随之改变，可以使用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。

通过这种方式，当按钮被点击时，背景颜色将改变，并且按钮中的图像颜色也会相应地改变。你可以根据需要修改自定义样式和图像图标来适应你的项目。

上一篇：背景颜色改变导致按钮无法点击。

下一篇：背景颜色改变：addEventListener不起作用

背景颜色改变时，Bootstrap按钮中的图像也随之改变，而不是按钮颜色。

相关内容

热门资讯