zoukankan      html  css  js  c++  java
  • js-网页换肤

    one.css

    1 body{
    2     background-color: black;
    3 }
    4 
    5 input{
    6     width: 200px;
    7     height: 100px;
    8     background-color: red;
    9 }
    View Code

    TWO.css

    1 body{
    2     background-color:#CCCCCC;
    3 }
    4 
    5 input{
    6     width: 100px;
    7     height: 50px;
    8     background-color: aquamarine;
    9 }
    View Code

    one.html

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <link id="l1" href="one.css" type="text/css" rel="stylesheet">
     7 
     8     <script>
     9         function skin1() {
    10           var oL=document.getElementById('l1');
    11           oL.href='one.css';
    12         }
    13         function skin2() {
    14             var oL=document.getElementById('l1');
    15             oL.href='TWO.css';
    16         }
    17 
    18     </script>
    19 </head>
    20 <body>
    21 <input type="button" value="皮肤1" onclick="skin1()" />
    22 <input type="button" value="皮肤2" onclick="skin2()" />
    23 
    24 </body>
    25 </html>
    View Code

    总结:

    任何标签都可以加id,包括link

    任何标签的任何属性,也都可以修改(例如html的href属性)

    html怎么写,js就怎么写(除了className)

    input的title属性:提示文字

    html的实现效果:

    点击皮肤1会显示一个皮肤,点击皮肤2又会显示另外一个个皮肤

  • 相关阅读:
    shell 命令
    unzip解压失败 添加tar 解压
    tomcat
    Linux常用命令
    压缩归档与解压
    Linux的任务计划管理
    A01. openstack架构实战-openstack基本环境准备
    ubuntu16.04 server版破解密码
    Ubuntu Server 18.04 网络设置不生效的解决
    带宽单位 Mbps 及换算方式
  • 原文地址:https://www.cnblogs.com/OFSHK/p/12765229.html
Copyright © 2011-2022 走看看