实用资源点击按钮改变网页文字颜色的实现方法

点击按钮改变网页文字颜色的实现方法

经常看到有的网站上设置了几个颜色按钮,点击某个颜色就可以将网站换成对应颜色的“主题”,这种效果一般是通过js给网页某部分添加某个class,然后在CSS里给相应的class设置相应的颜色风格,本文分享一个简单的“改变网页主题”的方法:

点击鼠标更改文字颜色.png

CSS部分代码:

<style type="text/css">
body,p,ul,li,h1 {margin:0;padding:0;}
#all {width:700px;margin:10px auto;line-height:2.2;border:2px solid #eee;padding:20px;}
ul {height:40px;margin-top:20px;}
ul li {list-style-type:none;float:left;width:20px;height:20px;margin-right:10px;cursor:pointer;}
.skin{height:40px;background:#fff;}
.skin .red{background:#e33;}
.skin .black{background:#888;}
.skin .blue{background:#00f;}
.skin .green{background:#093;}
.red {color:#e33;}
.black {color:#888;}
.blue {color:#00f;}
.green {color:#093;}
</style>

引入Jquery和相关JS代码:

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){var cookieClass=getCookie('class');$("#box").attr("class",cookieClass);$(".skin_list li").each(function(){$(this).click(function(){var className=$(this).attr("class");$("#box").attr("class",className,30);function SetCookie(name,value,day){var exp=new Date();exp.setTime(exp.getTime()+day*24*60*60*1000);document.cookie=name+"="+escape(value)+";expires="+exp.toGMTString()}SetCookie("class",className,30)})})});function getCookie(name){var nameEQ=name+"=";var ca=document.cookie.split(';');for(var i=0;i<ca.length;i++){var c=ca[i];while(c.charAt(0)==' ')c=c.substring(1,c.length);if(c.indexOf(nameEQ)==0)return c.substring(nameEQ.length,c.length)}return null}
</script>

网页body部分代码:

<div id="all">
<div class="skin"><ul class="skin_list"><li class="red"></li><li class="black"></li><li class="blue"></li><li class="green"></li></ul></div>
<div id="box">
<h1>Bootstrap</h1>
<p>Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。</p>
<p>Bootstrap 的源码是基于最流行的 CSS 预处理脚本 - Less 和 Sass 开发的。你可以采用预编译的 CSS 文件快速开发,也可以从源码定制自己需要的样式。</p>
<p>Bootstrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。Bootstrap 最初是由就职于 Twitter 的一个设计师和一个工程师创造的,现在,Bootstrap 已经成为了这个世界上最流行的前端开发框架和开源项目。</p>
<p>……</p>
</div>
</div>

预览效果 下载地址

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/down/126.html