Как применить модификацию CSS с помощью кнопки

Question

Я хотел бы применить фильтр к изображению (когда я нажимаю кнопку) , и если я нажму другую кнопку, то будет применен другой фильтр.

Как я могу это сделать?

Благодарим за помощь.

Я пробовал использовать: активную функцию в CSS, но это касается только кнопки. Я пробовал использовать 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

вы можете попробовать этот

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>