浏览器标题切换
浏览器标题切换end

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又会显示另外一个个皮肤

 

posted @   抓水母的派大星  阅读(170)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示