Question

我有一个图像（蓝色和白色的组合）和背景颜色（白色）。点击div，我需要反转颜色。（背景颜色为蓝色）和图像（图像的蓝色部分为白色，图像的白色部分为蓝色）。

Html：

<div class="col" ng-click="onHomeButtonClick()">
                        <img src="images/iconHome.png" class="menu-icons"><br>
                        </div>

Js代码：

this.onHomeButtonClick = function($event){
        $event.target.style.backgroundColor="DarkSlateBlue";
        }

到目前为止已经尝试过：

使用$event.target.style.backgroundColor="DarkSlateBlue";我只能设置背景颜色。但我如何反转颜色。

Answer 1

尝试使用CSS deklaration：

这可能是这样的：

<强> HTML：

<img src="images/iconHome.png" id="imageToInvert" class="menu-icons">

<强> CSS：

#imageToInvert:hover {
    filter: invert(100%);
}

希望这有帮助。

Answer 2

不确定过滤器：反转（100％）实际上是您所要求的，但如果它是您所做的评论中所示，则只需创建具有该样式的课程。例如.filterClass {filter：invert（100％）}然后使用此element.className + =“filterClass”在您的click事件中添加该类;

Answer 3

我希望这可以帮助你Fiddle这个用于背景颜色的div，你可以使用相同的技术并改变图像颜色。

反转图像颜色和背景颜色

3 个答案: