如何使用按钮应用 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

你可以试试这个

var FilterGrey = document.getElementById("FilterGrey");
var FilterOpacity = document.getElementById("FilterOpacity");
var FilterVideo = document.getElementById("FilteredImg");
FilterGrey.addEventListener('click', function(){
  FilterVideo.style.filter = "grayscale(100%)";
});
FilterOpacity.addEventListener('click', function(){
  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>

如何使用按钮应用 CSS 修改

How can I apply a CSS modification with a button

html

css

html5-video