用于在图像上应用 css 过滤器的 Javascript 按钮答案

【问题标题】：Javascript button to apply css filter on image用于在图像上应用 css 过滤器的 Javascript 按钮
【发布时间】：2014-04-24 12:23:30
【问题描述】：

我想创建一个按钮，单击该按钮时会执行一些 javascript 代码把img的css改成filter:sepia(100%);

这就是我所拥有的，按钮是可点击的，但没有应用过滤器……

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="css/screen.css" rel="stylesheet" type="" />
    <meta charset="UTF-8"/>
    <meta name="author" content=""/>
</head> 
<body>
    <img src="image.jpg" alt="yeah"/>
    <button onclick="sep()" id="button"></button>

    <script>
        button.onclick=sep(){document.getElementsByTagName("img").style.filter="sepia(100%)"};
    </script>

</body> 
</html>

【问题讨论】：

getElementsByTagName 返回一个 DOM 对象数组，您要么需要遍历它们，要么以其他方式访问您的图像。我建议给它一个 id 并通过getElementById 访问它。
button.onclick = function(){...} 或 onclick="sep()" function sep(){...}
@user3507600 我把它改成getElementById("hills") 并在img 中添加了一个id="hills"，但它仍然不起作用。
@Thibmaekelbergh，您还需要以这种方式引用您的按钮。 getElementById("button").onclick ...

标签： javascript html css css-filters

【解决方案1】：

使用 jquery 的解决方案可能是

$("#button").click(function(){
    $("img").addClass("sepia");
});

和类

.sepia{ -webkit-filter: sepia(1);
-webkit-filter: sepia(100%); -moz-filter: sepia(100%);
-ms-filter: sepia(100%); -o-filter: sepia(100%);
filter: sepia(100%);
filter: alpha(opacity = 50);
zoom:1;
}

demo

【讨论】：