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 相关文章推荐
基于JQuery的cookie插件
Apr 07 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
微信小程序间使用navigator跳转传值问题实例分析
Mar 27 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 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下清空字符串中的HTML标签的代码
2010/09/06 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
2017/08/15 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
JS实现百度搜索框
2021/02/25 Javascript
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
Python3离线安装Requests模块问题
2019/10/13 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
如何用python 操作zookeeper
2020/12/28 Python
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
Ryderwear澳洲官网:澳大利亚高端健身训练装备品牌
2018/09/18 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
服装行业创业计划书范文
2014/02/05 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
捐书倡议书
2014/08/29 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
个人工作表现评价材料
2014/09/21 职场文书
2014年消防工作总结
2014/11/21 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
计划生育汇报材料
2014/12/26 职场文书
感恩父母主题班会
2015/08/12 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js