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 相关文章推荐
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
javascript之通用简单的table选项卡实现(二)
May 09 Javascript
window.dialogArguments 使用说明
Apr 11 Javascript
js获取图片大小的函数代码
Sep 20 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
Nov 19 Javascript
javascript数组输出的两种方式
Jan 13 Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
JS使用H5实现图片预览功能
Sep 30 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一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
PHP 函数学习简单小结
2010/07/08 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
PHP实现的日历功能示例
2018/09/01 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
发现的以前不知道的函数
2006/09/19 Javascript
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
json 入门基础教程 推荐
2009/10/31 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
一个原生的用户等级的进度条
2010/07/03 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
常用DOM整理
2015/06/16 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
python 异常处理总结
2016/10/18 Python
python实现图片批量压缩程序
2018/07/23 Python
判断python字典中key是否存在的两种方法
2018/08/10 Python
pandas通过索引进行排序的示例
2018/11/16 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
浅谈Python基础—判断和循环
2019/03/22 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
美国在线家装零售商:Build.com
2016/09/02 全球购物
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
关于幼儿的自我评价
2013/12/18 职场文书
青年文明号创建承诺
2014/03/31 职场文书
企业金融服务方案
2014/06/03 职场文书
中考标语大全
2014/06/05 职场文书
python自动化测试之Selenium详解
2022/03/13 Python