js Dom实现换肤效果


Posted in Javascript onOctober 21, 2017

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>换肤</title>
 <link rel="stylesheet" href="base.css">
 <link rel="stylesheet" href="spring.css">
 <script src="change.js"></script> 
</head>
<body>
 <header>
  <span>季节</span>
  <button>换肤</button>
 </header>
 <div class="main">
 </div>
</body>
</html>

基本样式文件

header{
 position: absolute;
 top:0px;
 width:1366px;
 height: 60px;
 text-align: center;
}
header>span{
 line-height: 60px;
}
header>button{
 width:60px;
 height:45px;
 position: absolute;
 right:30px;
 margin-top:8px;
}
.main{
 margin-top: 60px;
 width:1366px;
 height:600px;
}

spring.css文件

html,body{
 padding: 0px;
 margin: 0px;
}
header{
 background-color: #C0FF3E;
}
.main{
 background: url(img/spring.jpg) no-repeat;
 background-size: 1366px 600px;
}

summer.css文件

html,body{
 padding: 0px;
 margin: 0px;
}
header{
 background-color: #76EE00;
}
.main{
 background: url(img/summer.jpg) no-repeat;
 background-size: 1366px 600px;
}

change,js文件

function change(){
 var link=document.getElementsByTagName("link")[1];
 var btn=document.getElementsByTagName("button")[0];
 btn.onclick=function(){
  if(link.href=="http://localhost:8000/BOM%E5%AD%A6%E4%B9%A0/spring.css"){
   link.href="summer.css";
  }else{
   link.href="spring.css";
  }
 };
}
window.onload=function(){
 change();
};

主要是取得link标签对象,替换link里面的属性href

js Dom实现换肤效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
actionscript与javascript的区别
May 25 Javascript
jquery中获取元素的几种方式小结
Jul 05 Javascript
Dom操作之兼容技巧分享
Sep 20 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
Dec 15 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
详解Javacript和AngularJS中的Promises
Feb 09 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
Jan 29 Javascript
javascript基础知识之html5轮播图实例讲解(44)
Feb 17 Javascript
less简单入门(CSS 预处理语言)
Mar 08 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 #Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 #Javascript
vue做网页开场视频的实例代码
Oct 20 #Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 #Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 #Javascript
2种简单的js倒计时方式
Oct 20 #Javascript
pm2 部署 node的三种方法示例
Oct 20 #Javascript
You might like
php多文件上传实现代码
2014/02/20 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
php实现删除空目录的方法
2015/03/16 PHP
php常量详细解析
2015/10/27 PHP
PHP中each与list用法分析
2016/01/08 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
python学习入门细节知识点
2018/03/29 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
python中四舍五入的正确打开方式
2021/01/18 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
幼儿园国庆节活动方案
2014/02/01 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
MySQL 查询速度慢的原因
2021/05/25 MySQL