如何用JS更换css模板?

html-css09

如何用JS更换css模板?,第1张

<html>

<head>

<link ID="skin" rel="stylesheet" type="text/css">

<title>动态换肤技术</title>

<script language="javascript" type="text/javascript">

<!--

function SetCookie(name,value)

{

var argv=SetCookie.arguments

var argc=SetCookie.arguments.length

var expires=(2<argc)?argv[2]:null

var path=(3<argc)?argv[3]:null

var domain=(4<argc)?argv[4]:null

var secure=(5<argc)?argv[5]:false

document.cookie=name+"="+escape(value)+((expires==null)?"":("expires="+expires.toGMTString()))+((path==null)?"":("path="+path))+((domain==null)?"":("domain="+domain))+((secure==true)?"secure":"")

}

function GetCookie(Name)

{

var search = Name + "="

var returnvalue = ""

if (document.cookie.length >0)

{

offset = document.cookie.indexOf(search)

if (offset != -1)

{

offset += search.length

end = document.cookie.indexOf("", offset)

if (end == -1)

end = document.cookie.length

returnvalue=unescape(document.cookie.substring(offset,end))

}

}

return returnvalue

}

var thisskin

thisskin=GetCookie("nowskin")

if(thisskin!="")

skin.href=thisskin

else

skin.href="css.css"

function changecss(url)

{

if(url!="")

{

skin.href=url

var expdate=new Date()

expdate.setTime(expdate.getTime()+(24*60*60*1000*30))

//expdate=null

//以下设置COOKIES时间为1年,自己随便设置该时间..

SetCookie("nowskin",url,expdate,"/",null,false)

}

}

//-->

</script>

</head>

<body>

<P>请选择下面的下拉菜单测试换肤效果

<p><a href=# onClick="changecss('css.css')">css.css</a><a href=# onClick="changecss('css1.css')">css1.css</a><a href=# onClick="changecss('css2.css')">css2.css</a><a href=# onClick="changecss('css3.css')">css3.css</a></p>

<p>

<select name="select" onChange="changecss(this.value)">

<option>选择样式单文件</option>

</select>

</p>

<select name="select" onChange="changecss(this.value)">

<script language="javascript">

var csss=new Array()

csss[0]="css.css"

csss[1]="css1.css"

csss[2]="css2.css"

csss[3]="css3.css"

var i

for(i=0i<4i++)

if(thisskin==csss[i])

document.write("<option value=\""+csss[i]+"\" selected>"+csss[i]+"样式单文件</option>")

else

document.write("<option value=\""+csss[i]+"\">"+csss[i]+"样式单文件</option>")

</script>

</select>

</body>

</html>

方法就是把你所需求的js和css放入一个文件夹common下!

<link type="text/css" rel="stylesheet" href="common/test.css"></link>

<script type="text/javascript" src="common/test.js"></script>

这样两者引入以后就可以使用了 当然文件夹的路径应该要设置好,

我的例子是common文件和你要引用的文件在同一目录下的!

那你可以把

<link type="text/css" rel="stylesheet" href="common/test.css"></link>

<script type="text/javascript" src="common/test.js"></script>

引用的文件都放入一个文件include.php当中,然后在需要的里面加上

include ("include.php")就可以在里面使用。如果需要更改的话,只要改include.php里面的就行了!希望是你要的!