Question

我想创建一个按钮，点击后执行一些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>

Answer 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

Javascript按钮在图像上应用css过滤器

1 个答案: