JS+CSS 实现网站颜色切换功能

合集下载

纯CSS免费让网站拥有暗黑模式切换功能的实现代码

纯CSS免费让⽹站拥有暗⿊模式切换功能的实现代码前⾔暗⿊模式这个概念最早起源于MacOS系统的Mojave，提供浅⾊主题和深⾊主题两种⽪肤供⽤户选择，深⾊主题就是我们常说的暗⿊模式。

为了眼睛健康，笔者在⼿机、平板和电脑上都选择了暗⿊模式。

随着苹果官⽅逐渐要求各⼤系统平台都得适配暗⿊模式，所以笔者也探索出⼀种应该是市⾯上最低成本的⽹站暗⿊模式适配⽅案。

认识笔者的朋友应该都知道笔者是⼀位重度CSS发烧友，当然这次也是使⽤纯CSS实现这个⽅案。

是的，不加任何⼀段JS，侧⾯再次证明CSS的强⼤。

思路思路很简单，使⽤⼀个按钮来回切换主题样式。

按钮未选中则切换到浅⾊主题，按钮选中则切换到深⾊主题。

可⽤:checked和+打辅助完成这个任务。

:checked ：选项选中的表单元素+ ：元素相邻的同胞元素使⽤<input>模拟按钮，当按钮处于选中状态时触发:checked，通过+带动后⾯相邻的⽹站主体<div>进⼊暗⿊模式，选中状态取消时则退出暗⿊模式。

<body><input class="ios-switch" type="checkbox"><div class="main">⽹站主体</div></body>更多选择器的功能和分类请回看笔者这篇⽂章《可》。

切换按钮打算设计⼀个美观的按钮，可是没有特别思路，就打开iPhone，把设置⾥的切换按钮⽤纯CSS实现⼀番。

尺⼨和颜⾊都是与 iPhone切换按钮⼀致。

思路是使⽤<input>模拟按钮，声明appearance:none将其默认外观抹去，使⽤::before模拟背景区域，使⽤::after模拟点击区域，在触发:checked后添加⼀些⼩动画进⾏修饰，近乎完美地实现了iPhone切换按钮。

<input class="ios-switch" type="checkbox">.btn {border-radius: 31px;width: 102px;height: 62px;background-color: #e9e9eb;}.ios-switch {position: relative;appearance: none;cursor: pointer;transition: all 100ms;@extend .btn;&::before {position: absolute;content: "";transition: all 300ms cubic-bezier(.45, 1, .4, 1);@extend .btn;}&::after {position: absolute;left: 4px;top: 4px;border-radius: 27px;width: 54px;height: 54px;background-color: #fff;box-shadow: 1px 1px 5px rgba(#000, .3);content: "";transition: all 300ms cubic-bezier(.4, .4, .25, 1.35);}&:checked {background-color: #5eb662;&::before {transform: scale(0);}&::after {transform: translateX(40px);}}请戳查看在线演⽰与源码。

javascript实现点击点击按钮改变网页背景颜色

javascript实现点击点击按钮改变网页背景颜色源代码如下，页面中放了三个按钮，每当点击某一个按钮后，网页背景将会变成相对应的颜色。

（原创：转载请注明出处-“编程大海”）<html><head><title>test</title><script type="text/javascript" src="js/3.js"></script><script>function changeRed(){var d=document.getElementById('tt');d.style.backgroundColor="red";}function changeGreen(){var d=document.getElementById('tt');d.style.backgroundColor="green";}function changeYellow(){var d=document.getElementById('tt');d.style.backgroundColor="yellow";}</script></head><body id="tt"><input type="button" value="红色背景" onclick="changeRed()"/><input type="button" value="绿色背景" onclick="changeGreen()"/><input type="button" value="黄色背景" onclick="changeYellow()"/></body></html>。

js切换主题背景的方法

js切换主题背景的方法摘要：一、切换主题背景的常用方法二、具体实现步骤1.使用CSS样式切换背景颜色2.使用JavaScript动态修改背景颜色3.使用CSS动画切换背景图片4.使用JavaScript结合CSS实现动态背景切换正文：作为一名前端开发者，掌握切换主题背景的方法是必备技能之一。

本文将介绍几种常见的切换主题背景的方法，以及具体实现步骤。

一、切换主题背景的常用方法1.使用CSS样式切换背景颜色通过在CSS中设置`body`标签的`background-color`属性，可以实现切换背景颜色的效果。

例如：```cssbody {background-color: red;}```2.使用JavaScript动态修改背景颜色通过JavaScript可以实时地修改页面的背景颜色。

以下是一个简单的示例：```javascriptfunction changeBackgroundColor() {document.body.style.backgroundColor = "blue";}// 调用函数更改背景颜色changeBackgroundColor();```3.使用CSS动画切换背景图片通过CSS的`@keyframes`规则和`animation`属性，可以实现背景图片的切换。

例如：```cssbody {animation: backgroundImage 5s infinite;}@keyframes backgroundImage {0% {background-image: url("image1.jpg");}50% {background-image: url("image2.jpg");}100% {background-image: url("image1.jpg");}}```4.使用JavaScript结合CSS实现动态背景切换通过JavaScript可以控制CSS中的背景图片切换，实现动态效果。

使用CSS实现深色模式主题切换

使用CSS实现深色模式主题切换随着人们对用户体验的要求越来越高，许多网站和应用程序开始提供深色模式主题切换选项。

深色模式不仅能提供更好的视觉效果，还能减少眼部疲劳。

本文将介绍如何使用CSS来实现深色模式主题切换。

一、为网站添加深色模式样式表为了实现深色模式主题切换，首先需要为网站创建一个深色样式表。

可以将该样式表保存为一个独立的CSS文件，例如"dark-mode.css"。

在这个样式表中，通过修改网站元素的颜色和背景属性来实现深色模式的效果。

例如，可以将网站的背景色修改为深灰色，文字颜色修改为浅色来突出显示：```CSSbody {background-color: #222222;color: #ffffff;}```除了修改背景色和文字颜色，还可以根据需要修改链接颜色、按钮颜色等其他元素的样式。

二、添加深色模式切换按钮要实现深色模式主题切换，需要为网站添加一个切换按钮，让用户可以在浅色模式和深色模式之间进行选择。

可以在网站的导航栏或设置菜单中添加该按钮。

```HTML<button id="dark-mode-toggle">切换深色模式</button>```在CSS样式表中，为深色模式切换按钮添加样式。

例如，可以修改按钮的背景色和文字颜色以适应深色模式：```CSS#dark-mode-toggle {background-color: #222222;color: #ffffff;}```三、使用JavaScript切换深色模式要实现深色模式主题切换，还需要使用JavaScript来处理切换按钮的点击事件。

通过JavaScript，可以切换整个网站的样式表，从而实现深色模式和浅色模式之间的切换。

首先，需要为切换按钮添加一个点击事件的监听器。

当用户点击按钮时，会触发一个JavaScript函数。

```JavaScriptdocument.getElementById("dark-mode-toggle").addEventListener("click", function() {// 切换网站的样式表});```在JavaScript函数中，可以通过修改网站的样式表来切换深色模式和浅色模式。

js中css方法

js中css方法JavaScript中的CSS方法是一组用于操作和修改网页中CSS样式的函数。

通过使用这些方法，我们可以动态地改变元素的样式，包括修改其大小、位置、颜色、字体等。

下面是500字以上关于JavaScript中CSS方法的详细介绍：在JavaScript中，我们可以使用`style`属性来访问和修改元素的CSS样式。

每个元素都有一个`style`属性，其中包含了一个CSS样式对象，可以通过该对象的属性来设置相应的样式。

例如，要改变元素的背景颜色，可以使用`element.style.backgroundColor`属性。

另一个常用的CSS属性是`display`，用于控制元素的显示方式。

通过设置`element.style.display`，可以将元素隐藏或显示。

例如，将一个元素隐藏可以使用`element.style.display = 'none'`，将其显示可以使用`element.style.display = 'block'`。

另一个常用的CSS方法是`getBoundingClientRect`，用于获取元素的客户端矩形。

这个方法返回一个包含元素的位置、大小等信息的对象。

这对于动态调整元素的位置、计算元素之间的空白间隔等操作非常有用。

总的来说，JavaScript中的CSS方法提供了丰富的功能，使得我们可以通过编程的方式轻松地修改元素的样式。

通过这些方法，我们可以创建交互式网页，动态地改变元素的显示方式、位置、大小等，提高用户体验。

无论是制作动态效果，还是响应用户的交互行为，JavaScript的CSS方法都是不可或缺的工具。

需要注意的是，在使用这些CSS方法时，要遵循一些最佳实践。

首先，应尽量避免直接操作元素的`style`属性，尽量使用CSS方法来操作样式。

这样可以避免混淆和错误，同时也更易于维护和修改代码。

其次，要合理使用样式表和类，通过添加或移除类来改变元素的样式，而不是直接修改元素的样式属性。

js和css结合的例子

js和css结合的例子当JavaScript（JS）和CSS结合使用时，我们可以实现一些动态效果和交互功能。

以下是一个简单的JS和CSS结合的例子，用于在鼠标悬停时改变元素的颜色：HTML：```html<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="styles.css"></head><body><div id="myElement">这是一个示例文本。

</div><script src="script.js"></script></body></html>```CSS（styles.css）：```css#myElement {background-color: blue;color: white;padding: 10px;transition: background-color 0.3s;}#myElement:hover {background-color: red;}```JavaScript（script.js）：```javascript// JS代码在这里```在这个例子中，有一个具有id为“myElement”的div元素。

通过在CSS 文件中定义样式来设置初始的背景颜色（蓝色）和文本颜色（白色）。

使用CSS 的`transition`属性为背景颜色添加了一个过渡效果。

通过在CSS文件中使用`#myElement:hover`选择器，我们定义了当鼠标悬停在该元素上时的样式（背景颜色为红色）。

这样，当鼠标悬停在元素上时，背景颜色将从蓝色渐变到红色，创建一个动态的效果。

基于CSS+JAVAScript的网页换肤特效的设计与实现

基于CSS+JAVAScript的网页换肤特效的设计与实现作者：刘芳来源：《无线互联科技》2013年第10期摘要：网站的网页外观是一个网站的外在表现形式，而“换肤”的功能选择能够吸引大量用户的眼球，进而提高网站的浏览量。

本文基于CSS技术和JAVAScript脚本语言设计出简单方便的网页换肤效果，为用户提供相应的换肤选择，满足用户的需求。

关键词：网页换肤；CSS；JAVAScript；效果；设计随着网络的普及及发展，越来越多的人通过网络浏览网页信息，而网站外观是网站的门面，能够给用户直接的视觉感受，从而达到吸引用户眼球的目的。

网站可根据需求或时事对网站外观进行更换，例如在喜庆节日里换上具有中国特色的红色，在遇到痛苦时事时换上具有沉痛哀悼的黑色等。

一些网站为用户提供了相应的网页外观，用户可根据自身喜好对网站外观进行控制，也就是我们常说的“换肤”选择。

网页为满足用户对网页风格的需要，可通过多个外部样式表文件实现网页的换肤功能，用户在选择网页样式的过程中程序对样式文件进行修改，进而实现网页的换肤选择。

1 关键技术1.1 DIV+CSS层叠样式表（CSS）是一种控制网页样式的标记性语言，它能够分离网页内容和样式信息，进而达到定义网页位置、颜色和字体等外观的目的。

DIV元素主要为XHT-ML文档内的block-level内容提供相应的背景和结构元素，DIV+CSS组合可有效实现网页的应用布局。

HTML并不只是单用DIV标签，DIV会结合许多标签一起使用，而合理的标签应用及标准的Web页面结构的相互结合才能保证站点内容的索引速率。

1.2 JavaScript因特网中常用的脚本语言是JavaScript，通常利用JavaScript给XHTML网页添加各项功能，以响应用户操作。

功能十分强大，能够有效监测网页内各项动态，并及时予以相应反应，显示网页内容。

通过JavaScript功能，能够增加网页的灵活性，用户可根据自身需求决定网页的内容及外观。

CSS控制网页背景颜色的代码

CSS控制⽹页背景颜⾊的代码我想⼤家常常为⼀些⽐较合适于⾃⼰的⽹页背景的图⽚⽽发愁吧，这个我想也是有的，因为这些图⽚不是太⼤就是太⼩，或者太乱，那么有没有办法让图⽚能合⾃⼰的主页的胃⼝呢？答案是肯定的。

想知道怎么来实现嘛，好吧，⼤家现在开始跟着我做，我保证⼤家⼀定⼀学就会。

不过，我想在⽹上“成家”的朋友⼀般分为在⽹吧⾥“开业”（就像我⼀样，刚开始从他⼈的主页拉相关的代码来改的），还有就是在⾃⼰家⾥⽤DW或FP之类的专业软件制作好上传的，所以呢，我打算分开两步介绍，⾸先为在⽹吧⾥“开业”的朋友着想吧，最后再简要的介绍⼀些⽤DW4做的背景样式。

其实总得说来⼀切都是⼀样的，只不过是采⽤的⽅式不同罢了。

好了闲话少说了，现在就⼊正题吧。

说到背景也就只有背景颜⾊和颜⾊图⽚，这两个我想⼤家⼀定都知道在⾥加⼊bgcolor="#808080"和background="URL"对吧，可是我这⾥将要介绍不是这样做的，⽽是⽤CSS样式来做的，虽说有些⿇烦，可是整体配合还是⾮常不错的。

·背景颜⾊ background-color 我想这个我就不⽤多做介绍了，颜⾊代码我想⼤家都知道的，不是⽤英⽂来代替就是⽤指定的代码来表⽰的。

这个的默认值是transparent（透明⾊）。

例：body{background-color:yellow}H1{background-color:#000000} ·背景图⽚ background-image 背景图⽚和背景颜⾊在HTML⾥⾯的设置也是基本相同的，都可以在⾥加⼊相关的语句来完成。

但是在这⾥，我所指的并⾮是⽤这种⽅法，我⽤的⽅法还是CSS。

background-image这个的主要功能也就是⽤来显⽰图⽚，如果需要显⽰图⽚的话，那么只要在后⾯加上url(图⽚的地址）就可以了，不显⽰嘛，那是最简单不过的了，什么也不要就⾏了，因为这个默认的就是none，⽽要加的话，就是在后⾯加上这个none就可以了。

jquery+css实现网页颜色主题变换（只改变已设置好的几种颜色主题）

jquery+css实现⽹页颜⾊主题变换（只改变已设置好的⼏种颜⾊主题）⼜遇到颜⾊主题变化，这次使⽤了jquery+css，使⽤了函数传值，⽽不是之前改变link的⽅法。

⾸先是设置好颜⾊主题后，点击改变页⾯颜⾊主题。

（需要⾃⾏导⼊jquery.js后查看效果）直接贴代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script type="text/JavaScript" src="js/jquery.js"></script></head><style>div section{width: 30px;height: 30px;margin: 10px;display: inline-block;}div section:nth-of-type(1){background-color: #177cb0;}div section:nth-of-type(2){background-color: #db5a6b;}div section:nth-of-type(3){background-color: #008000;}div section:hover{cursor:pointer;}</style><body><div><section onclick="blue()"></section><section onclick="red()"></section><section onclick="green()"></section></div><center><h2 style="display:inline-block;">颜⾊主题jquery变换</h2><form action="" id="simpleCalc"><span>input：</span><input type="text" required><br><br><button id="calc">确认</button></form><span id="result"></span></center><script>//设置默认颜⾊主题$(document).ready(function(){blue();});// 点击单个换⾊function blue(){change("#177cb0");}function red(){change("#db5a6b");}function green(){change("#008000");}//设置需要改变颜⾊的元素及其样式function change(colo){$("#calc").css("background-color", colo);$("h2, span").css("color", colo);$("input").css("color", colo);$("input[type=text]").focus(function(){$(this).css("outline", "none")});$("input[type=text]").focus(function(){$(this).css("border", "2px solid " + colo)});$("input[type=text]").blur(function(){$(this).css("border", "1px solid gray")});}</script></body></html>下⼀篇贴即时变化颜⾊主题（通过input输⼊颜⾊值进⾏改变）的代码。

JavaScript实现通过滑块改变网页颜色

JavaScript实现通过滑块改变⽹页颜⾊⼤家好，今天我在看web前端的HTML时，看到input标签的type属性是range时在页⾯上显⽰的是⼀个滑块，我突发奇想能不能通过滑来改变⽹页的颜⾊。

现在我和⼤家分享⼀下通过滑块来改变⽹页的颜⾊。

⾸先要知道怎么样来表⽰颜⾊，颜⾊的表⽰有四种⽅式：1、⽤颜⾊的名称来表⽰颜⾊：red,green...等2、⽤#加16进制数表⽰：#FF0000/#F00 红⾊、#00FF00/#0F0 绿⾊ ...等3、⽤rgb值：rgb(0,0,0) ⿊⾊、rgb(255,255,255) ⽩⾊....等4、⽤rgba值表⽰：rgba(0,0,0,0.5) 半透明⿊⾊、rgba(255,0,0,.5) 半透明红⾊（a值表⽰透明度）我⽤的是rgb值表⽰颜⾊的，r值，g值，b值的取值范围都是0~255。

body中滑块的设置：max是最⼤取值，min是最⼩取值，step是步进值，这⾥还有⼀个value属性默认是取中间值<body id="box"><label for="r">r值</label><input type="range" max="255" min="0" step="1" id="r"><label for="g">g值</label><input type="range" max="255" min="0" step="1" id="g"><label for="b">b值</label><input type="range" max="255" min="0" step="1" id="b"></body>JavaScript：为每个滑块设置change事件，当滑块的值改变时就执⾏。

JS实现网页换肤功能效果

JS实现⽹页换肤功能效果使⽤ JS 切换对应的 CSS 样式表。

例如hao123⾸页的右上⽅就有⽹页换肤功能。

除了切换 CSS 样式表⽂件之外，通常的⽹页换肤还需要通过 Cookie 来记录⽤户之前更换过的⽪肤，这样下次⽤户访问的时候，就可以⾃动使⽤上次⽤户配置的选项。

基本流程如下：上⾯是使⽤流程图来描述下，⾃从⼯作以来很⼩画这样的流程图如果流程图画错了或者画的不够好请⼤家原谅！先来看看效果图吧！我只是做个demo 来实现这样⼀个效果！假如页⾯上⼀进来的时候有这么四个按钮分别代表不同的样式当我⿏标点击不同的按钮时候切换不同的css⽂件且切换时候记录cookie⾥⾯去，当我们刷新页⾯或者关闭⽹页重新打开由于cookie的存在所以还是关闭前的css样式这样就实现了简单的⽹页换肤功能效果基本的原理就是这些！⾸先我们来了解下cookie是⼲什么⽤的？简单讲 cookie作⽤是客户端存储数据。

也就是本地存储。

具体的了解可以看我之前的⼀篇关于cookie的博客。

讲到cookie，我们再来简单的来了解下HTML5中新增了2个本地存储sessionStorage和localStorage. sessionStorage、 localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引⼊了⼀个“浏览器窗⼝”的概念。

sessionStorage是在同源的同窗⼝（或tab）中，始终存在的数据。

也就是说只要这个浏览器窗⼝没有关闭，即使刷新页⾯或进⼊同源另⼀页⾯，数据仍然存在。

关闭窗⼝后，sessionStorage即被销毁。

同时“独⽴”打开的不同窗⼝，即使是同⼀页⾯，sessionStorage对象也是不同的。

Web Storage 带来的好处：减少⽹络流量：⼀旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。

JS实现点击颜色块切换指定区域背景颜色的方法

JS实现点击颜⾊块切换指定区域背景颜⾊的⽅法本⽂实例讲述了JS实现点击颜⾊块切换指定区域背景颜⾊的⽅法。

分享给⼤家供⼤家参考。

具体实现⽅法如下：复制代码代码如下:<html><head><title>JS实现点击颜⾊块切换指定区域的背景颜⾊</title></head><body><div align="center"><table bgcolor=#F8F8F8 border="0" width="500" cellpadding="0" style="border-collapse: collapse" height="180" id="bb1"> <tr><td colspan="2"><div align="center"><table border="0" width="90%" cellpadding="0" style="border-collapse: collapse" height="90" id="table2"><tr><td style="line-height: 150%"><span style="font-size: 14px">适时切换⽹页指定区域背景颜⾊</span></td></tr></table></div></td></tr></table></div><div align="center"><table border="0" width="500" cellpadding="0" style="border-collapse: collapse" height="20" id="table1"><tr><td width="219"><p align="right"><font color="#808080"><span style="font-size: 9pt">请选择背景：</span></font></td> <td width="281"><div align="center"><table border="1" width="240" cellspacing="0" cellpadding="0" height="20" id="table1" style="border-collapse: collapse" bordercolor="#FFFFFF"><tr><td width="60" onClick="bb1.style.backgroundColor='FDFDF0';set_color('FDFDF0')" bgcolor="#FDFDF0"></td><td onClick="bb1.style.backgroundColor='B1D5F3';set_color('B1D5F3')" bgcolor="#B1D5F3" width="60"></td><td onClick="bb1.style.backgroundColor='B4E7D9';set_color('B4E7D9')" bgcolor="#B4E7D9" width="60"></td><td onClick="bb1.style.backgroundColor='F1E8FF';set_color('F1E8FF')" bgcolor="#F1E8FF" width="60"></td><td onClick="bb1.style.backgroundColor='E8FFF3';set_color('E8FFF3')" bgcolor="#E8FFF3" width="60"></td><td onClick="bb1.style.backgroundColor='CDCDDE';set_color('CDCDDE')" bgcolor="#CDCDDE" width="60"></td></tr></table></div></td></tr></table></div><script language=javascript>function get_cookie(name_to_get) {var cookie_pairvar cookie_namevar cookie_valuevar cookie_array = document.cookie.split("; ")for (counter = 0; counter < cookie_array.length; counter++) {cookie_pair = cookie_array[counter].split("=")cookie_name = cookie_pair[0]cookie_value = cookie_pair[1]if (cookie_name == name_to_get) {return unescape(cookie_value)}}return null}var bg_color = get_cookie("bgColor_cookie")function set_color(color_val) {set_cookie("bgColor_cookie", color_val, 365, "/")}function set_cookie(cookie_name, cookie_value, cookie_expire, cookie_path, cookie_domain, cookie_secure) {var cookie_string = cookie_name + "=" + cookie_valueif (cookie_expire) {var expire_date = new Date()var ms_from_now = cookie_expire * 24 * 60 * 60 * 1000expire_date.setTime(expire_date.getTime() + ms_from_now) var expire_string = expire_date.toGMTString()cookie_string += "; expires=" + expire_string}if (cookie_path) {cookie_string += "; path=" + cookie_path}if (cookie_domain) {cookie_string += "; domain=" + cookie_domain}if (cookie_secure) {cookie_string += "; true"}document.cookie = cookie_string}if (bg_color) {bb1.style.backgroundColor = bg_color}</script></body></html>希望本⽂所述对⼤家的javascript程序设计有所帮助。

JavaScript实现更改网页背景与字体颜色的方法

JavaScript实现更改⽹页背景与字体颜⾊的⽅法本⽂实例讲述了JavaScript实现更改⽹页背景与字体颜⾊的⽅法。

分享给⼤家供⼤家参考。

具体分析如下：JavaScript，通过点击按钮更改⽹页背景与字体的颜⾊，⽹页中有N个改变颜⾊的按钮，点击不同的按钮，⽹页的字体与背景就会改变成不同的颜⾊。

很简单的JavaScript⼩程序。

⼀、基本⽬标⼀打开⽹页⾸先提⽰问候信息“你好”⽹页中有N个改变颜⾊的按钮，其中返回是返回⽹页的默认颜⾊，背景是⽩的，字体是⿊的点击不同的按钮，⽹页的字体与背景就会改变成不同的颜⾊。

本来想做出彩虹起⾊的，但原理完全⼀样就不多写按钮了。

⼆、基本思想关键是对body标签与字体js提供id，使其在js中得到控制。

本例提供了对js函数的应⽤。

三、制作过程就⼀个简单的⼩页⾯，详情看注释：复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>js换背景颜⾊</title><script type="text/javascript">//onload相当于本⽹页的构造函数，onunload相当于本⽹页的析取函数function load() {alert("你好！");}function unload() {alert("再见！");}function Changecolor(bcolor, fcolor) {//相当于对于字体<span style="color:传过来的fcolor">这样，改变字体的颜⾊document.getElementById("body").style.background = bcolor;document.getElementById("ziti").style.color = fcolor;}</script></head><body onload="load()" onunload="unload()" id="body"><span id="ziti">js</span><br /><input onclick="Changecolor('#ff0000','#ffffff')" type="button"value="⾚" /><input onclick="Changecolor('#ff9900','#ffffff')" type="button"value="橙" /><input onclick="Changecolor('#ffff00','#000000')" type="button"value="黄" />……<input onclick="Changecolor('#ffffff','#000000')" type="button"value="返回" /></body></html>onunload()函数⼏乎仅在IE关闭本页⾯时中有效，⽽且本对话框不会在最前端，⾕歌浏览器则没有任何效果。

jquery修改网页背景颜色通过css方法实现

jquery修改⽹页背景颜⾊通过css⽅法实现我们在浏览⼀些⽹站，尤其是⼀些⼩说⽹站的时候，都会有修改页⾯背景颜⾊的地⽅，这个功能使⽤jquery很容易实现。

效果图：show you code:复制代码代码如下:<!doctype html><html><head><meta charset="utf-8"><title>jquery test</title><script src="jquery-1.11.1.min.js"></script></head><body><button style="background-color:white" value="white">white</button><button style="background-color:red" value="red">red</button><button style="background-color:green" value="green">green</button><button style="background-color:yellow" value="yellow">yellow</button><div class="show"></div><script>$("button").click(function(){var color = this.value;$("body").css("background-color",color);})</script></html>我们先根据元素名选择我们要操作的对象：button，然后使⽤click⽅法找到被点击的按钮，然后在触发的事件中获取该按钮的对应的颜⾊值，然后通过css（）⽅法将该颜⾊值作为background-color的属性值传⼊。

详解如何简单实现CSS主题的切换

详解如何简单实现CSS主题的切换我最近在我的个⼈⽹站上添加了⼀个⾮常简单的配⾊⽅案（主题）切换器。

您可以在⽹站的页脚中切换此简单的颜⾊切换器，以查看其实际效果。

万⼀其他⼈希望将这样的功能添加到⾃⼰的站点/项⽬中，我想我会写⼀篇简短的⽂章解释如何做。

让我们开始吧。

HTML⾸先，我们需要包含“按钮”，这些按钮将触发主题根据选择的主题进⾏切换。

（注：你总是可以使这些作为options⼀个select元素，如果你最好的⽅法）<div class="color-select"><button onclick="toggleDefaultTheme()"></button><button onclick="toggleSecondTheme()"></button><button onclick="toggleThirdTheme()"></button></div>⽽已！现在不必太担⼼onclick参数，我们将在添加JavaScript时再回到这⼀点。

剩下的唯⼀⼀项是向html元素添加默认主题类，如下所⽰：<html class="theme-default">CSS接下来，我们需要为两个color-select按钮设置样式，并使⽤将更改整个⽹站的⾃定义配⾊⽅案。

我们将从配⾊⽅案开始。

为了使这些主题之间能够⽆缝切换，我们将更改的颜⾊集设置为CSS变量：.theme-default {--accent-color: #72f1b8;--font-color: #34294f;}.theme-second {--accent-color: #FFBF00;--font-color: #59316B;}.theme-third {--accent-color: #d9455f;--font-color: #303960;}body {background-color: var(--accent-color);color: var(--font-color);}最后，我们设置⾯向⽤户的⾊板的样式：.color-select button {-moz-appearance: none;appearance: none;border: 2px solid;border-radius: 9999px;cursor: pointer;height: 20px;margin: 0 0.8rem 0.8rem 0;outline: 0;width: 20px;}/* Style each swatch to match the corresponding theme */.color-select button:nth-child(1) { background: #72f1b8; border-color: #34294f; }.color-select button:nth-child(2) { background: #FFBF00; border-color: #59316B; }.color-select button:nth-child(3) { background: #d9455f; border-color: #303960; }JavaScript我们需要使每个⾊样按钮触发其相应的主题，并交换出theme-default我们最初附加到主html元素上的类。

JS实现颜色值的转换

JS实现颜⾊值的转换从⽹上看了个案例，是实现颜⾊值转换的，就想着⾃⼰也写个。

⽹上的案例链接找不到了，这⾥也就不贴了。

JavaScript颜⾊转换的核⼼就是进制间的转换。

rgba(0,0,0,.4)转换成#000000，就是Number.toString(16)#ffffff转换成rgb(255,255,255)，就是parseInt(String,16)代码如下：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"><title>JS-颜⾊值的转换</title><meta name="author" content="rainna"/><meta name="keywords" content="rainna's js lib"/><meta name="description" content="js"/><style>*{margin:0;padding:0;}body{background:#f0f0f0;}h2{margin:0 0 20px;}input{width:300px;height:24px;line-height:24px;}.m-box{width:900px;margin:0 auto;padding:20px;}</style></head><body><div class="m-box"><h2>RGB(A)颜⾊转换为HEX⼗六进制的颜⾊值</h2><div class="box1"><input type="text" id="colorIpt1" value="rgba(0,0,0,.4)"/><a href="#" id="link1">转换</a><input type="text" id="colorIpt2"/></div></div><div class="m-box"><div class="box1"><input type="text" id="colorIpt3" value="#ffffff"/><a href="#" id="link2">转换</a><input type="text" id="colorIpt4"/></div></div><script>var colorChange = {rgbToHex:function(val){ //RGB(A)颜⾊转换为HEX⼗六进制的颜⾊值var r, g, b, a,regRgba = /rgba?$(\d{1,3}),(\d{1,3}),(\d{1,3})(,([.\d]+))?$/, //判断rgb颜⾊值格式的正则表达式，如rgba(255,20,10,.54)rsa = val.replace(/\s+/g,'').match(regRgba);if(!!rsa){r = parseInt(rsa[1]).toString(16);r = r.length == 1 ? '0' + r : r;g = (+rsa[2]).toString(16);g = g.length == 1 ? '0' + g : g;b = (+rsa[3]).toString(16);b = b.length == 1 ? '0' + b : b;a = (+(rsa[5] ? rsa[5] : 1)) * 100;return {hex:'#' + r + g + b, alpha: Math.ceil(a)};}else{return {hex:val, alpha:100};}},hexToRgb:function(val){ //HEX⼗六进制颜⾊值转换为RGB(A)颜⾊值var a,b,c;if((/^#/g).test(val)){a = val.slice(1,3);b = val.slice(3,5);c = val.slice(5,7);return {rgba:'rgb(' + parseInt(a,16) + ',' + parseInt(b,16) + ',' + parseInt(c,16) + ')'};}else{return {rgba:'⽆效值：' + val};}}};link1.onclick = function(){var obj = colorChange.rgbToHex(document.getElementById('colorIpt1').value);document.getElementById('colorIpt2').value = '颜⾊值：' + obj.hex + '，透明度：' + obj.alpha + '%'; };link2.onclick = function(){var obj = colorChange.hexToRgb(document.getElementById('colorIpt3').value);document.getElementById('colorIpt4').value = '颜⾊值：' + obj.rgba;};</script></body></html>。

使用CSS实现黑暗模式和高亮模式的切换功能

使⽤CSS实现⿊暗模式和⾼亮模式的切换功能在 Web技巧的第五期中专门提到⼀个有关于CSS实现⿊暗模式和⾼亮模式的技术⽅案。

即使⽤新的媒体查询条件prefers-color-scheme的值dark和light来进⾏切换，这是从最底层也是最原⽣的解决⽅案，除此之外还可以通过CSS的混合模式属性来模拟。

当然，除了期刊中提到的技术⽅案之外，还有其他的⼀些解决⽅案。

今天我们就来⼀起学习⼀下，如何实现⿊暗模式和⾼亮模式之间的切换。

什么是⿊暗模式和⾼亮模式在聊技术⽅案之前先来简单地了解什么是⿊暗模式和⾼亮模式？这两个概念是来源于 macOS系统，该系统为⽤户提供两个主题⽪肤，即⾼亮和暗⾊系的⽪肤。

⾃从有了这个概念之后，很多⽹站都会⽤户提供了相应的两套肤⾊，便于⽤户根据⾃⼰的习惯或爱好进⾏切换。

不管是⿊暗模式还是⾼亮模式，都是⿊⽩⾊之间的切换，这种主题风格对于有⾊盲的⽤户群体⽽⾔是⾮常有友好的。

类似这样的功能，在其他的系统或者软件中都略有⾝影，不同之处是提供的模式。

在⼀些软件中，可能会给⽤户提供⼀些⽪肤⾃定制的功能。

当然在⽹站上也有类似的功能，只不过我们以往可能更喜欢把这种功能称为⽹站换肤。

这样⼀来，我们就可以把这两者模式之间的切换先按换肤来聊，可能会更切合我们的业务场景。

接下来我们来聊聊技术上⾯的事情，即如何使⽤CSS来完成Web页⾯或应⽤程序的主题切换！最简模式假设你的主题默认是⾼亮模式，我们可以使⽤⼀种最为简单粗暴的⽅式将⾼亮模式切换到⿊暗模式。

假设在Web页⾯有⼀个⼊⼝，让⽤户点击这个button时会给html元素添加⼀个dark-theme类名：document.getElementById('buttonID').addEventListener('click', function(){document.documentElement.classList.add('dark-theme')})在.dark-theme以及他所有后代元素上添加暗⿊⾊样式：.dark-theme {background-color: #000;color: white;}.dark-theme *:not(a) {background-color: #000 !important;color: #fff !important;border-color: #999 !important;}这种⽅式虽为简单粗暴，但有些细节需要额外处理，特别是代码中也有使⽤!important的样式时，会较为头痛。

实现网页换肤功能方法详解

实现网页换肤功能方法详解以前我们会经常看到有网站具备网页换肤功能了，今天我来介绍如何实现网页换肤吧，这里主要是利用css+js的cookie来操作，下面我给大家详细介绍。

-网页换肤事先需要的准备首先你可能要准备多套CSS 样式表文件，当点击换肤按钮的是，使用 JS 来切换对应的 CSS 样式表。

之后，就是在网页上增加一个 ul li 列表，用 CSS 修饰一下做成换肤选项。

例如：下面我们就来看具体功能代码。

实现点击切换对应 CSS 功能首先，我们的皮肤选项的 HTML 结构是这样的然后在网页的顶部偏下的位置放上一个空的link 标签，我们将会使用 jQuery 为这个 link 标签赋予不同的 CSS 文件实现切换效果其中，我自定义了一个data-href 属性来存放系统默认的皮肤，这样当页面加载完成之后，如果 JS 没有检测到 Cookie 中的皮肤信息，就会把 data-href 中的内容赋值上去。

之后就是大家熟悉的 jQuery 代码：大体的逻辑就是获取到当前皮肤的 class 然后截取出来 skin* 然后通过一个函数得到其对应的CSS 文件。

skincssurl 记载的是网页的非皮肤 CSS 文件，主要用来获取当前网页的 CSS 目录 URL ，最后将混合好的 CSS 皮肤文件赋值准备好的空 link 中，实现换肤。

增加 Cookie 记录皮肤功能这里主要用到两个自定义的函数，用来创建、读取 Cookie 内容。

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 false;}function createCookie(name,value,days) {if (days) {var date = new Date();date.setTime(date.getTime()+(days*24*60*60*1000));var expires = "; expires="+date.toGMTString();}else expires = "";document.cookie = name+"="+value+expires+"; path=/";}你只需要把这两个函数复制到 JS 代码区域即可。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。