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

最新推荐文章于 2024-07-07 14:09:47 发布

zjsunshine

最新推荐文章于 2024-07-07 14:09:47 发布

阅读量1.9k

点赞数

分类专栏： javascript asp.net 文章标签： javascript class button c ie

asp.net 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

javascript

20 篇文章 0 订阅

订阅专栏

<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进行设置，则无此问题。