如何使用按钮应用 CSS 修改 [关闭]答案

【问题标题】：How can I apply a CSS modification with a button [closed]如何使用按钮应用 CSS 修改 [关闭]
【发布时间】：2017-01-26 14:18:43
【问题描述】：

我想对图像应用过滤器（当我单击按钮时）如果我点击另一个按钮，它会应用另一个过滤器。

我该怎么做？

感谢您的帮助。

我尝试在 CSS 中使用 :active 函数，但这仅适用于按钮。我尝试过使用 javascript，但它不起作用。

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

【问题讨论】：

你的html代码在哪里？！
你试过调试你的代码吗？ document.body.video.filter = "grayscale(100%)"什么是document.body.video？即使它确实存在，您也会寻找Node.style.filter 而不是Node.filter。此外，听起来您想要多个过滤器可切换，您将需要更多的逻辑。您能否请edit 您的问题包含minimal reproducible example？调试问题需要 MCVE 的主题。

标签： html css html5-video

【解决方案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>

【讨论】：

谢谢它的工作 :D 但是知道我怎样才能应用多个过滤器吗？
您可以使用相同的filter 属性依次应用多个过滤器。只需将一个链接到另一个的末端。它看起来像这样：filter: blur(10px) grayscale(50%);

【解决方案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>

【讨论】：