• 2.1网页换肤


    功能:鼠标点击不同的2个input进行换肤(切换样式表)

    事件:onclick

    属性:样式表link里的href

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">


    <link id="l1" href="css1.css" rel="stylesheet" type="text/css"
    charset="UTF-8">
    </head>
    <body>
    <input id="input1" type="button" value="皮肤1" />
    <input id="input2" type="button" value="皮肤2" />

    <script src="js1.js"> </script>
    </body>
    </html>

    ////////////////css1

    body{background: pink;}
    #input1{
    background:pink;
    200px;
    height:100px;
    border:1px yellow solid;
    }
    #input2{
    background:green;
    200px;
    height:100px;
    border:1px yellow solid;
    }

    /////////////////css2

    body{background: green;}
    #input1{
    background:pink;
    100px;
    height:50px;
    border:1px blue solid;
    }
    #input2{
    background:green;
    100px;
    height:50px;
    border:1px blue solid;
    }

    //////////////////js

    var input1=document.getElementById("input1");
    var input2=document.getElementById("input2");
    input1.onclick=function (){
    var oL=document.getElementById("l1");
    oL.href="css1.css";


    };
    input2.onclick=function (){
    var oL=document.getElementById("l1");
    oL.href="css2.css";

    };

  • 相关阅读:
    Databases Questions & Answers
    SQL语句
    常见的数据库基础面试题大全
    关于GET POST
    经常遇到的浏览器兼容性问题
    关于JavaScript中apply与call的用法意义及区别(转)
    js闭包的用途
    深入理解js闭包
    undefined与null的区别
    HeapSort快速排序
  • 原文地址:https://www.cnblogs.com/luxiaoli/p/8503459.html
Copyright © 2020-2023  润新知