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

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

javascript html css

Javascript按钮在图像上应用css过滤器,javascript,html,css,css-filters,Javascript,Html,Css,Css Filters,我想创建一个按钮，单击该按钮时执行一些javascript代码以将img的css更改为filter:sepia100% 这就是我得到的，按钮是可点击的，但不应用过滤器 <!DOCTYPE html> <html> <head> <title></title> <link href="css/screen.css" rel="stylesheet" type="" /> <meta charse

我想创建一个按钮，单击该按钮时执行一些javascript代码以将img的css更改为filter:sepia100%

这就是我得到的，按钮是可点击的，但不应用过滤器

<!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>

使用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;
}

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