zoukankan      html  css  js  c++  java
  • 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";

    };

  • 相关阅读:
    一些面试题(2)
    poj1102 7段数码管
    一些面试题(3)
    poj百练2737大整数除法
    枚举
    poj2244 约瑟夫环
    [Craftor原创]精通ModelSim脚本(1)
    [Craftor原创]带FIFO的UART收发器设计
    继电器的一些基本术语
    Every success is a creation for me
  • 原文地址:https://www.cnblogs.com/luxiaoli/p/8503459.html
Copyright © 2011-2022 走看看