HTML作业4

最新推荐文章于 2024-08-20 19:23:57 发布

Kina_C

最新推荐文章于 2024-08-20 19:23:57 发布

阅读量67

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_63369513/article/details/140684936

版权

图片变色

<!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="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        img{
            margin-top: 50px;
            margin-left: 425px;
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
    <div id="div">
         <img id="jY" src="./R-C.jpg"> 
    </div>
    <script>
        $("#jY").click(function(){
            $("#div").css("color","blue");
        });
    </script>
</body>
</html>

渐变背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景渐变转换</title>
    <style>
        div{
            height: 700px;
        }
    </style>
</head>
<body>
    <div style=" background-image: linear-gradient(to right,blue,pink); " class="div1" onclick="change()"></div>
    <script>
    var div1 =document.getElementsByClassName("div1")[0];
    function change(){
        if(div1.className =="div1"){
            div1.className ="div2";
            div1.setAttribute("style","background-image: linear-gradient(to top,blue,pink);");
        }else if(div1.className =="div2"){
            div1.className ="div3";
            div1.setAttribute("style","background-image: linear-gradient(to left,blue,pink);");
        }else if(div1.className =="div3"){
            div1.className ="divc4";
            div1.setAttribute("style","background-image: linear-gradient(to bottom,blue,pink);");
        }else{
            div1.className ="div1";
            div1.setAttribute("style","background-image: linear-gradient(to right,blue,pink);");
        }
    }
</script>
</body>
</html>