第四次作业

最新推荐文章于 2024-08-05 22:35:13 发布

ilisi_

最新推荐文章于 2024-08-05 22:35:13 发布

阅读量206

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/ilisi_/article/details/140676867

版权

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

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./JQuery.js"></script>
    <style>
        .div1{
            background-color: aqua;
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
</body>
</html>
<script>
    $(".div1").click(function(){
            $(".div1").css("background-color","blue");
        })
</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>
        .div1{
            width: 500px;
            height: 500px;
            background-image: linear-gradient(to right,red,yellow);
        }
    </style>
</head>
<body>
    <div class="div1" id="div1"></div>
</body>
</html>
<script>
    var bgjb =  document.getElementById("div1");
    bgjb.onclick = function(){
        this.style.background=`linear-gradient(to left,red,yellow)`
    }
</script>

运行结果