脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js Dom实现换肤效果

js Dom实现换肤效果

 更新时间：2017年10月21日 09:05:45   作者：数星星的咚咚咚  
这篇文章主要为大家详细介绍了js Dom实现换肤效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 详解JavaScript中精度失准问题及解决方法

    详解JavaScript中精度失准问题及解决方法

    这篇文章主要介绍了JavaScript中精度失准问题及解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • 详解JavaScript中的Object.is()与

    详解JavaScript中的Object.is()与"==="运算符总结

    这篇文章主要介绍了详解JavaScript中的Object.is()与"==="运算符总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • 最新热门脚本Autojs源码分享

    最新热门脚本Autojs源码分享

    AutoJS 是基于一个标准字典库的文本输入自动完成 JavaScript 库。Auto.js 是使用纯 JS 实现的，没有任务外部依赖，大小仅仅 6kb，本文给大家分享最新热门脚本Autojs源码，感兴趣的朋友一起看看吧
    2021-05-05
  • JavaScript 中this指向问题案例详解

    JavaScript 中this指向问题案例详解

    这篇文章主要介绍了JavaScript 中this指向问题案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • JavaScript计算某一天是星期几的方法

    JavaScript计算某一天是星期几的方法

    这篇文章主要介绍了JavaScript计算某一天是星期几的方法,需要的朋友可以参考下
    2015-08-08
  • 详细聊一聊js防抖节流到底是什么

    详细聊一聊js防抖节流到底是什么

    在项目开发中我们常常会去监听滚动事件或者用户输入框验证事件,如果事件处理没有频率限制,当用户不断触发事件时,就会加重浏览器的负担,影响用户的体验,造成不必要的损失,这篇文章主要给大家介绍了关于js防抖节流到底是什么的相关资料,需要的朋友可以参考下
    2022-04-04
  • javascript 函数参数限制说明

    javascript 函数参数限制说明

    我依稀记得哪本书上有说过,实参数限制是32个? 现在想想估计是我记错了..他也许说的是32位.
    2010-11-11
  • 详解JavaScript中的数据类型转换

    详解JavaScript中的数据类型转换

    在JavaScript中，数据类型的转换是一项常见的任务，不同的数据类型之间需要相互转换以满足程序的需求，本篇博客将深入探讨JavaScript中的数据类型转换，包括隐式转换和显式转换的概念、转换规则和常见的数据类型转换示例
    2023-06-06
  • JavaScript对JSON数据进行排序和搜索

    JavaScript对JSON数据进行排序和搜索

    今天教给大家如何使用数组的方法来实现JSON数据进行排序和搜索功能，具体实例代码大家参考下本文吧
    2017-07-07
  • 在webstorm中配置less的方法详解

    在webstorm中配置less的方法详解

    这篇文章主要介绍了在webstorm中配置less的方法，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
    2020-09-09

最新评论