Javascript 更改标签的class属性
Javascript 切换更改网页标签的Class属性,通过 javascript 动态控制标签样式class属性。在每个标签中都有一个class属性用以接收,样式Style样式,一般情况下是直接将样式名直接赋值给class,那么本通过Javascript来回自由切换样式达到不通显示效果。
示例一
先在<style>中定义好两个css样式,命名分别为font01和font02。font01的字体大小为20px(即 font-size:20px;),Color为红色,font-family为黑体,font-variant为normal;font02的字体为24px,color为#0033CC,font-family为黑体,font-variant为大写字母显示small-caps;,并且加粗字体font-weight:bolder。
javascript脚本建立function changeCssClass(objDiv,objClass)方法,带入动态参数objDiv为div的id动态传入,objClass为样式名称动态传入。在方法中把objClass赋给objDiv的className,即document.getElementById(objDiv).className = objClass;。
在<body>中放入两个按钮响应changeCssClass(objDiv,objClass)事件,用来来回切换div的class属性。div建一个个id为FontDiv, class为font01;div简单输入文字,这里示例中为“ Javascript class name change preview!!”。下面是代码和效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
![]()
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.font01
{
font-size:20px;
color:Red;
font-family:黑体;
font-variant:normal
}
.font02
{
font-size:24px;
color:#0033CC;
font-family:黑体;
font-variant:small-caps;
font-weight:bolder
}
</style>
<script language="javascript" type="text/javascript">
// <![CDATA[
//Copyright (C) 遗昕 | weisim3.com 04.04.2012
function changeCssClass(objDiv,objClass) {
![]()
document.getElementById(objDiv).className = objClass;
![]()
}
![]()
// ]]>
</script>
</head>
<body>
![]()
<div>
![]()
<input id="Button1" type="button" value="Blue"
onclick="return changeCssClass('FontDiv','font02')" />
![]()
<input id="Button2" type="button" value="Red"
onclick="return changeCssClass('FontDiv','font01')" />
![]()
</div>
![]()
<div style="padding-top:15px">
<div id="FontDiv" class="font01">
Javascript class name change preview!!
</div>
</div>
![]()
</body>
</html>
示例一效果
示例二
再加入两个样式,font03 和font04 两个的样式属性都大致相同font-size:54px;、color:#0033CC; 、font-family:黑体;、font-variant:small-caps;、font-weight:bolder;,不同的是font03的background-color为#BADBE2,font04设置了背景图片background-image: url('img/1.png');。在<body>中再加入按钮用以切换font04。在div响应鼠标事件onmouseout="return changeCssClass('FontDiv','font01')"和onmouseover="return changeCssClass('FontDiv','font03')",鼠标滑入滑出时触发,下面全部代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
![]()
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Javascript class name change preview!! - weisim3.com</title>
<style type="text/css">
.font01
{
font-size:20px;
color:Red;
font-family:黑体;
font-variant:normal
}
.font02
{
font-size:24px;
color:#0033CC;
font-family:黑体;
font-variant:small-caps;
font-weight:bolder
}
/*示例二*/
.font03
{
font-size:54px;
color:#0033CC;
font-family:黑体;
font-variant:small-caps;
font-weight:bolder;
background-color:#BADBE2
}
![]()
.font04
{
font-size:54px;
color:#0033CC;
font-family:黑体;
font-variant:small-caps;
font-weight:bolder;
background-image: url('img/1.png');
}
</style>
<script language="javascript" type="text/javascript">
// <![CDATA[
//Copyright (C) 遗昕 | weisim3.com 04.04.2012
function changeCssClass(objDiv,objClass) {
![]()
document.getElementById(objDiv).className = objClass;
![]()
}
![]()
// ]]>
</script>
</head>
<body>
![]()
<div>
![]()
<input id="Button1" type="button" value="Blue"
onclick="return changeCssClass('FontDiv','font02')" />
![]()
<input id="Button2" type="button" value="Red"
onclick="return changeCssClass('FontDiv','font01')" />
![]()
<input id="Button3" type="button" value="BgImg"
onclick="return changeCssClass('FontDiv','font04')" />
![]()
</div>
![]()
<div style="padding-top:15px;">
<div id="FontDiv" class="font01"
onmouseout="return changeCssClass('FontDiv','font01')"
onmouseover="return changeCssClass('FontDiv','font03')" >
Javascript class name change preview!!
</div>
</div>
![]()
</body>
</html>
示例二效果