假如我们想通过前台自主选择CSS样式来达到改变颜色、风格等目的的话，用JS调用CSS文件就OK。

先做两个（或多个）CSS文件。

style_1.css　代码：

body{background-color: #ccff66;}

......

style_2.css　代码：

body{background-color: #ff0000;}

......

JS代码如下：

<link rel="stylesheet" rev="stylesheet" id="style" type="text/css" media="all" />
<script>
function change_skin(obj){
    if(obj.length<1){
        return;
    }else{
        document.getElementById("style").href=obj;
    }
}
</script>
<body>
    <select οnchange="change_skin(this.value)" id="skinStyle">
        <option value="">改变风格</option>
        <option value="style_1.css">风格 1</option>
        <option value="style_2.css">风格 2</option>
    </select>
</body>

用JS来切换CSS，很好很简单相关推荐

  1. JS 跑马灯效果实现（很好用）

    原文地址为: JS 跑马灯效果实现(很好用) 实现跑马灯效果的JS很多,但是很多不好用,下面介绍一个比较好用的. 好用之处在于: 1 支持一个页面多个跑马灯效果 2.支持跑马灯内容的异步加载 关键的实 ...

  2. Vue.js 实现v-if和v-else来切换CSS样式

    一.要想使用Vue.js实现v-if和v-else来切换CSS样式,有两种实现方式: 比如我们想给一个div设置两个不同的背景颜色(当status为1的时候,我们设置背景为红色,当status状态为2 ...

  3. js中单引号和双引号的区别（html中属性规范是用双引号，js中字符串规定是用单引号）（js中单引号区别和php很像：单引号快，双引号可转义字符，双引号可解析变量）...

    js中单引号和双引号的区别(html中属性规范是用双引号,js中字符串规定是用单引号)(js中单引号区别和php很像:单引号快,双引号可转义字符,双引号可解析变量) 一.总结 1.html中属性规范是 ...

  4. 很小巧,很好用的js格式化工具

    很小巧,很好用的js格式化工具 无论你js写的多乱,都能给你格式化的整整齐齐的,不必为了格式化而打开myeclipse了 :-) 下载:http://mailxwk.googlepages.com/J ...

  5. 常用CSS与Flex布局、媒体查询、JS事件控制css、VUE对象语法、Gride布局(待补全) CSS权重 页面适配笔记本缩放

    css属性就是要用的多用的熟 知道的多 就像一本工具书 除了基础原理 剩下的就是知识面了 极力推荐MDN用过的人都说好~ 页面适配笔记本等自带缩放的场景 let t = window.devicePi ...

  6. Asp.Net下通过切换CSS换皮肤

    换皮肤的方式有很多种,最简单的通常就是切换页面CSS,而CSS通常写在外部CSS文件里.那么切换css其实就是更换html里的link href路径.我在网上搜索了下.一般有两种方式: 1,在页面放一 ...

  7. js判断最后一个字符是不是指定字符_结合简单的 JS 就可以让 CSS 也能做搜索

    是的,结合简单的 JS 代码就可以让 CSS 做当前页面的搜索引擎.效果大概就是这样: 其实呢这个是很早之前我就整了,用来给自己的一些无聊的 demo 或者瞎折腾玩的页面做索引搜索的.页面不多,但有时 ...

  8. vue动态切换css文件_如何在vue组件中动态的引入css文件?

    问题描述 如标签描述的不准确,请见新直能分支调二浏页器朋代说谅 我的需求是开的接都上的和,近很触是没他电同近很触是没发多套皮肤,打包的时候只加载其中某一种的皮肤(不需要动态换肤),因为css文件过大, ...

  9. css倒序循环,不借助后台和 JS ，只用 CSS 让一个列表编号倒序

    我正在做一个项目,其中有一个倒序的列表.列表创建时间降序排序的,这里我想在语义和视觉上都能体现出来(让列表显示对应的编号,编号越大表示是最新的).网上做了一些研究,找到了一些有趣的解决办法,有些很好, ...

最新文章

  1. 2018-3-10论文（网络评论中非结构化信息表示与应用研究）-----综合评价的实例
  2. 5.29 相约杭州！云原生 Meetup 第二期杭州站报名开启！
  3. Error:scalac: Error: scala.collection.immutable.$colon$colon.tl$1()Lscala/collection/immutable/List；
  4. angular 注入器配置_注入器和发布库–AngularJS学习笔记（三）
  5. （36）Verilog HDL关系运算：大于、小于、等于
  6. 【网络流24题】[CTSC1999]家园
  7. CSS 属性篇(六)：background-size属性
  8. Memcached笔记——（四）应对高并发攻击【转】
  9. JavaScript:剖析ES6(1)--let和const
  10. 怎样找回W ndows7密钥,怎么找到windows7密钥
  11. 大数据数据库（HBase）
  12. 在HTML文字标签i什么效果,html的i标签有什么作用
  13. 由对称引起的空间结构耦合效应
  14. html表格宽度设置没效果,html表格宽度设置失效
  15. 动软多数据库链接类实例
  16. Foxmail签名和模板的使用
  17. natapp实现内网穿透（详解）
  18. JAVA8学习9-自定义收集器（Characteristics 使用说明）
  19. 计算机病毒发作的后果,计算机病毒和危害
  20. 牛客小白月赛5 I.区间 (interval)

热门文章

  1. 【Google Play】Android 应用隐私政策 ( 生成隐私政策 | HTML 隐私政策模板 | Markdown 隐私政策模板 )
  2. 【错误记录】发布 Flutter 插件包报错 ( It‘s strongly recommended to include a “homepage“ or “repository“ field )
  3. 【错误记录】安卓编译错误 ( Could not find xxx.tools.build:aapt2 )
  4. 【Flutter】Flutter 手势交互 ( 点击事件处理 | 点击 onTap | 双击 | 长按 onLongPress | 点击取消 | 按下 onTapDown | 抬起 onTapUp )
  5. [Spring cloud 一步步实现广告系统] 9. 主类和配置文件
  6. Golang 入门系列(十) mysql数据库的使用
  7. Redis源码剖析（十二）--客户端和服务器
  8. Hibernate中的Entity类之间的继承关系之一MappedSuperclass
  9. Linux下安装jdk(xxx.rpm,非xxx.tar.gz,请注意!)过程
  10. 从无头单链表中删除节点 结构之法 4