イメージの色と背景の色を逆にする

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";を使用してcolour.Butどのように色を反転させるのですか？彼この

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

希望：

これは、このようなことができます：

HTML：

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

CSS

Answer 1

てみCSSのdeklarationを使用しますlps。

Answer 2

フィルター：invert（100％）は実際にあなたが求めているものですが、作成したコメントに示されているとおりのものであれば、そのスタイルでクラスを作成してください。 .filterClass {filter：invert（100％）}のように、このelement.className + = "filterClass"を使用してクリックイベントでそのクラスを追加します。

Answer 3

私は、これはこの1つはあなたが同じテクニックを使用して、あまりにも画像の色を変更することができ、背景色とのdivのためであるあなたFiddle役立つことを願っています。