• js俩习题


    需求,现在要求两个按钮,点击1,背景为红色,点击2,背景为黄色



    *****html代码
    ——————————————————————————————————————————————————
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>changzhecolour</title>
    <!--通过外链引入css表单,id标记此link属性-->
    <link rel="stylesheet" type="text/css" href="css1.css" id="link"/>
    </head>
    <body>
    <!--定义一块区域,放入两个按钮-->
    <div id="div">
    <input id="d1" type="button" value="换成红色"/>
    <input id="d2" type="button" value="换成黄色"/>
    </div>
    <script>
    <!--lk这个变量代表了外链的内容,通过id=link这个链接。d1变量则是代表了id="d1"这个标签的内容,就是换成红色这个button-->
    var lk = document.getElementById("link");
    var d1 = document.getElementById("d1");
    var d2 = document.getElementById("d2");
    // 换成红色这个button的onclick属性 ,也就是发生在d1上的onclick事件,让lk变量代表的link改变了路径,进而改变div背景
    d1.onclick = function () {
    lk.href= "css2.css"

    };
    d2.onclick = function () {
    lk.href= "css1.css"

    };

    </script>
    </body>
    </html>


    ————————————————————————————
    ****css1.css 代码
    ————————————————————————————
    #div {
    800px;
    height: 800px;
    background: yellow;
    }
    #d1{
    80px;
    height: 30px;
    margin: 20px 50px 0px;

    }
    #d2{
    80px;
    height: 30px;
    margin: 20px 50px 0px;

    }
    ——————————————————————————————————————————
    ¥¥¥¥¥ css2.css 代码
    ——————————————————————————————————————————
    #div {
    300px;
    height: 300px;
    background: red;
    }
    #d1{
    80px;
    height: 30px;
    margin: 20px 50px 0px;

    }
    #d2{
    80px;
    height: 30px;
    margin: 20px 50px 0px;

    }




  • 相关阅读:
    day10_发送邮件终极版
    day10_发送带附件的邮件
    day10_发送普通邮件
    day10_多线程性能测试
    day10_虚拟环境和搭建测试环境的步骤
    codeforces 877B
    codeforces 982C Cut 'em all! (dfs)
    洛谷P1171 售货员的难题 dp
    点集配对问题
    codeforces 891A Pride (数学)
  • 原文地址:https://www.cnblogs.com/chaojiyingxiong/p/9286093.html
Copyright © 2020-2023  润新知