【html】第四次作业-CSDN博客

本文链接：https://blog.csdn.net/ATRI_555/article/details/140641893

1.使用Jquery完成点击图片变换图片颜色

页面

下图是点击图片后的页面

通过点击图片来改变滤镜，从而改变图片颜色；点击div区域来改变div的背景颜色

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击图片切换颜色</title>
    <script src="./JQuery.js"></script>
    <style>
        div{
            background-color: aquamarine;
            flex-flow: row;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <img src="https://ts1.cn.mm.bing.net/th/id/R-C.e067070296a4a6c75f920e74bdd711c7?rik=VWfV%2baQ0orVKOQ&riu=https%3a%2f%2f2.zoppoz.workers.dev%3a443%2fhttp%2fserver5.intermedia.ge%2farticle_images%2fsmall%2f202004%2f2020042913355880935.jpg&ehk=emWsPY3mpP21NQPkIFQMzhcTjVFGeEM%2bbcfb4VYEMpM%3d&risl=&pid=ImgRaw&r=0" alt="">
    <div id="div1">div1</div>
</body>
</html>
<script>    
        $("img").click(function(){   
            $(this).css("filter", $(this).css("filter") === "sepia()" ? "" : "sepia(100%)");  
        });  
    
        $("#div1").click(function(){
            $("#div1").css("background-color", "red");
        });
 
</script>

2.使用JS中的DOM操作完成背景颜色渐变方向变换。点击背景，渐变方向发生改变。

页面

下图是点击后的页面

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-image: linear-gradient(to right bottom,red,yellow);
            border: 1px solid red;
            height: 600px;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
</html>
<script>
    var id_div1 = document.getElementById("div1")
    id_div1.addEventListener('click', function(){  
        this.style.backgroundImage = 'linear-gradient(to left top, red, yellow)';
    });
</script>