如何用js实现,点击后,改变一个css

JavaScript0214

如何用js实现,点击后,改变一个css,第1张

方法步骤:

先获取要改变css的元素。

改变这个元素的style属性。

eg:下面是改变div的背景色,改为蓝色。

<style>

div{width:200pxheight:200pxbackground:#f00}

</style>

<div>改变背景色</div>

<script>

var div = document.getElementsByTagName("div")

div.style.background = "blue"

</script>

更改一个标签的 class 属性的代码是:

document.getElementById( id ).className = 字符串

document.getElementById( id ) 用于获取标签对应的 DOM 对象,你也可以用其它方法获取。className 是 DOM 对象的一个属性,它对应于标签的 class 属性。字符串 是 class 属性的新值,它应该是一个已定义的CSS选择符。

class 属性是在标签上引用样式表的方法之一,它的值是一个样式表的选择符,如果改变了 class 属性的值,标签所引用的样式表也就更换了,所以这属于第一种修改方法。

利用这种办法可以把标签的CSS样式表替换成另外一个,也可以让一个没有应用CSS样式的标签应用指定的样式。

举例:

代码如下:

<style type="text/css">

.txt {

font-size: 30pxfont-weight: boldcolor: red

}

</style>

<div id="tt">欢迎光临!</div>

<p><button on click="setClass()">更改样式</button></p>

<script type="text/javas cript">

function setClass()

{

document.getElementById( "tt" ).className = "txt"

}

</script>

/* ======= FileName:skinCss.js =======

* Author:Crystal (Feng Fupeng)

* Date:2008-02-24

* Email:8215349[at]qq.com

*/

function GetCookie(sName)

{

var aCookie = document.cookie.split("")

for (var i=0i <aCookie.lengthi++)

{

var aCrumb = aCookie[i].split("=")

if (sName == aCrumb[0])

{

return aCrumb[1]

}

}

return null

}

function SetCookie(name, value, time, domain)

{

var expdate = new Date()

var expires = time

if(expires!=null){

expdate.setTime(expdate.getTime() + ( expires * 1000 ))

expd = "expires="+expdate.toGMTString()+""

}else

expd = ""

if (domain)

{

domain = "domain="+ domain +"path=/"

}

document.cookie = name + "=" + escape (value) + "" + expd + domain

}

var cookieTag = "nd_skin"

var vSkin = GetCookie(cookieTag)

//皮肤撤销初始化皮肤

if(vSkin=="yx_subject0708"){setSkinColor('blue')}

function setSkinColor(vSkinNum)

{

SetCookie( cookieTag, vSkinNum, 60*60*24*30,"")

if(vSkinNum=="yx_subject0708"){vSkinNum="blue"}

document.getElementById("skinCss").href = "http://192.168.2.123/home/css/"+vSkinNum+".css"

}

if( vSkin &&vSkin!="Style" )

{

document.getElementById("skinCss").href = "http://192.168.2.123/home/css/"+vSkin+".css"

}

上面是JS里面代码,函数名字能看的懂吧,包含了换css的路径和初试输出还有cookie的记录,都包含在上面了,解释起来就很多了,相信你应该能看的明白

页面上html代码如下:

<link id="skinCss" href="http://172.21.13.133/KM_home/css/blue.css" rel="stylesheet" type="text/css" />

这个注意这个ID,你要换名字也可以,JS里面也要对应的换,至于放哪位置,就不必说了吧

然后还有一段就是你要换样式,那么一定要有触发事件

在body里面可以加上<ol>

<li><span class="skinPink" onclick="setSkinColor('pink')" title="粉红色">粉红</span></li>

<li><span class="skinBlue" onclick="setSkinColor('blue')" title="蓝色">蓝</span></li>

<li><span class="skinRed" onclick="setSkinColor('red')" title="红色">红</span></li>

<li><span class="skinGreen" onclick="setSkinColor('green')" title="绿色">绿</span></li>

<li><span class="skinPeagreen" onclick="setSkinColor('peagreen')" title="淡绿色">淡绿</span></li>

<li><span class="skinOrange" onclick="setSkinColor('orange')" title="橙色">橙</span></li>

<li><span class="skinPurple" onclick="setSkinColor('purple')" title="紫色">紫</span></li>

<li><a href=javascript:homePage()>设为首页</a></li>

</ol>

看的明白么,这是本人曾经做过的一个同功能的风格切换JS

测试就不用了,现在页面用的好好的,你看看满意么?

=============

你发给我的代码我看过了,我发了邮箱回复给你了,你看看