JS一键换肤

JavaScript07

JS一键换肤,第1张

      项目要求通过js来控制进行一键换肤，例如把#ffffff改成#000000的颜色等，通过一系列的方法对比，结出比较合适的方案是： 通过ocument.body.style.setProperty方法来给body上添加变量，在css中应用变量，然后在js中控制变量的。例如:'--color1a" 是为了解决变量中有透明度要求的问题。

此方法优势有：不需要引用插件，使用原生js, css使用var函数,  兼容性强。

在css中使用如下：

js方法如下：

<link href="css/color1.css" id="color" rel="stylesheet" type="text/css" /><!--注意这行的id-->

<a onclick="changeStyle(1)">样式1</a>

<a onclick="changeStyle(2)">样式2</a>

上面是html，下面是js.把选定的样式加载进cookies ,网页加载先查cookie。

function getObject(elementId) { //获取指定id的object 

if (document.getElementByIdx) {  return document.getElementByIdx(elementId) } 

else if (document.all) {  return document.all[elementId] } 

else if (document.layers) {  return document.layers[elementId] }

}

function changeStyle(id){//切换样式 

var stylesheet=getObject("color").href="css/color"+id+".css" 

document.cookie="stylesheet="+escape(stylesheet)//写入Cookie 

//alert(document.cookie) 

//alert(stylesheet)

}

function initStyle(){ //初始化样式，如果cookie存在样式，则加载cookie样式，否则加载默认样式  

if(/stylesheet=([^]+)/.test(document.cookie))//判断是否存在cookie.   

getObject("color").href=unescape(RegExp.$1)   

//alert(/stylesheet=([^]+)/.test(document.cookie))

}initStyle()