ボタンでCSSを変更するにはどうすればいいですか

Question

ボタンをクリックしているときに画像にフィルタを適用したいのですが、別のボタンをクリックすると別のフィルタが適用されます。

どうすればいいですか？

ありがとうございました。

CSSで：active関数を使用しようとしましたが、ボタンにのみ適用されます。私はjavascriptを使ってみましたが、うまくいきませんでした。

function FilterGrey() { 
    var FilterGrey = Document.getElementsById("FilterGrey"); 
    document.body.video.filter = "grayscale(100%)" 
} 

Answer 1

ここでは、JavaScriptを使用してクラスを切り替える例を示します。

http://codepen.io/anon/pen/mAAPrz

function filter1() { 
 
    document.getElementById('image').classList.toggle('filter1'); 
 
} 
 
function filter2() { 
 
    document.getElementById('image').classList.toggle('filter2'); 
 
}

filter1 { 
 
    filter: blur(10px); 
 
} 
 
.filter2 { 
 
    filter: grayscale(50%); 
 
}

<img src="http://mikeruiz.org/files/bliss-caf-newest.jpg" id="image"> 
 
<button onclick="filter1();">Filter 1</button> 
 
<button onclick="filter2();">Filter 2</button>

Answer 2

あなたのhtmlコードがあるこの

var FilterGrey = document.getElementById("FilterGrey"); 
 
var FilterOpacity = document.getElementById("FilterOpacity"); 
 
var FilterVideo = document.getElementById("FilteredImg"); 
 
FilterGrey.addEventListener('click', function(){ 
 
\t \t FilterVideo.style.filter = "grayscale(100%)"; 
 
}); 
 
FilterOpacity.addEventListener('click', function(){ 
 
\t \t FilterVideo.style.filter = "opacity(40%)"; 
 
})

#FilteredImg { 
 
    display:block; 
 
    margin-bottom:20px 
 
}

<img id="FilteredImg" src="http://placehold.it/350x150/e8117f/fff"> 
 
<button id="FilterGrey"> 
 
Filter Grey 
 
</button> 
 
<button id="FilterOpacity"> 
 
Filter Opacity 
 
</button>