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

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

经常看到有的网站上设置了几个颜色按钮,点击某个颜色就可以将网站换成对应颜色的“主题”,这种效果一般是通过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.sz-kmd.com.cn/down/126.html

DIV+CSS基础DIV+CSS技巧CSS3基础建站经验技巧实用资源下载