用javascript动态设置对象的class的通用方法

<html  xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>改变 javascript:;" rel="nofollow" onClick="javascript:tagshow(event, '%B6%D4%CF%F3');" target="_self"> 对象的样式class</title>
<style>
.c1{font-size:15px; color:blue; font-weight:bold}
.c2{font-size:18px; color:red; font-weight:bold; background-color:yellow;}
</style>
</head>
<script language="javascript">
function initClass()
{
var d=document.getElementById("d1");
d.className="c1";
}

function changeClass()
{
var d=document.getElementById("d1");
d.className="c2";
}

function setClass(obj_id,_class)
{
var obj=document.getElementById(obj_id);
obj.setAttribute("class",_class);//此句可无
obj.setAttribute("className",_class);
}

</script>
<body>
<div id="d1">
是中国人
</div>
<p><br>
<br>
<input type="button" value="改变class" name="c1" οnclick="initClass()">
  
<input type="button" value="继续改变class" name="c1" οnclick="changeClass()">
  
<input type="button" value="标准 设置" name="c1" οnclick="setClass('d1','c1')">
</p>

</body>
</html>



注意: 如果是直接改变对象的class属性,可以使用“对象.className=新样式名”,而不能用“对象.class=新样式名”,否则在IE中会报错;

但如果是用setAttribute进行设置,则无此问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值