JS 鼠标点击切换网站颜色样式方法

《JS 鼠标点击切换网站颜色样式方法》正文开始，本次阅读大概5分钟。

在建站的时候，偶尔可能需要用到一个功能：切换网站颜色样式，今天就介绍几个通过JS方式切换网站颜色样式的方法：

一、在我以前的印象里，页面的字体属性，背景，等样式在页面加载后基本上都是固定的了，但是今天看到可以通过js修改页面的样式，觉得有必要和大家分享下。

html
head
metahttp-equiv=Content-Typecontent=text/html;charset=GB18030
titlecssajax/title
scripttype=text/javascriptsrc=test.js
/script
linkhref=styles.csstype=text/cssrel=stylesheet/
/head
body
tableid=table
tr
thid=tableHeadProductName/th
/tr
tr
tdid=tableFirstLineAirPlane/td
/tr
tr
tdid=tableSecondLineBigcar/td
/tr
/table
br/
inputtype=buttonvalue=setstyle1onclick=setStyle1()/
触发事件改变页面的样式
inputtype=buttonvalue=setstyle2onclick=setStyle2()/
触发事件改变页面样式
/body
/html

现在页面的文字样式，背景，字体大小，都是系统默认的，待会儿，给大家演示下运行结果，可以比较下哦

JS文件：

functionsetStyle1(){//将表的风格改为style1
//获取html的引用
oTable=document.getElementById(table);
oTableHead=document.getElementById(tableHead);
oTableFirstLine=document.getElementById(tableFirstLine);
otableSecondLine=document.getElementById(tableSecondLine);
//设置风格
oTable.className=Table1;
oTableHead.className=TableHead1;
oTableFirstLine.className=TableContent1;
oTableSecondLine.classNamee=TableContent1;
}
functionsetStyle2(){//将表格的风格改为style2
//获取html元素的引用
oTable=document.getElementById(table);
oTableHead=document.getElementById(tableHead);
oTableFirstLine=document.getElementById(tableFirstLine);
otableSecondLine=document.getElementById(tableSecondLine);
//设置风格
oTable.className=Table2;
oTableHead.className=TableHead2;
oTableFirstLine.className=TableContent2;
oTableSecondLine.classNamee=TableContent2;
}

CSS：

/*@CHARSETGB18030;*/
.Table1
{
border:DarkGreen1pxsolid;
background-color:LightGreen;
}
.TableHead1
{
font-family:Verdana,Arial;
font-weight:bold;
font-size:10pt;
}
.TableContent1
{
font-family:Verdana,Arial;
font-size:10pt;
}
.Table2
{
border:DarkBlue1pxsolid;
background-color:LightBlue;
}
.TableHead2
{
font-family:Verdana,Arial;
font-weight:bold;
font-size:10pt;
}
.TableContent2
{
font-family:Verdana,Arial;
font-size:10pt;
}

二、先说结论，总结成一句话就是 “加载对应的css，后加载的css覆盖默认显示样式，即可达到换主题的目的”，具体的实现分为2步： 准备两份不同主题的css 使用js实现切换(加载)css的方法

生成不同主题的css不同主题的css差异主要体现在颜色这个概念上，理论上只要有使用颜色的地方都需要进行适当的调整，比如文字颜色，背景色，边框颜色等等。简单来说就是白底陪黑字，黑底用白字，如果是采用了灰度色，则根据现实情况进行适度调整或无需调整。最简单的调整颜色的方法是使用适当的工具来生成css，比如less，scss等。

具体请看文章：http://www.w2bc.com/article/209505

三、CSS样式切换技巧 - 动态更换网页色彩皮肤