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

最新推荐文章于 2024-05-06 18:17:39 发布

iteye_8239

最新推荐文章于 2024-05-06 18:17:39 发布

阅读量206

点赞数

分类专栏： Javascript 文章标签： JavaScript HTML ViewUI

Javascript 专栏收录该内容

4 篇文章

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> 改变对象的样式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" onclick="initClass()">

<input type="button" value=" 继续改变class" name="c1" onclick="changeClass()">

<input type="button" value=" 标准设置" name="c1" onclick="setClass('d1','c1')">
</p>

</body>
</html>