简明现代魔法 -> JavaScript -> DOM属性:className介绍

DOM属性:className介绍

2010-06-01

className 属性设置或返回元素的 class 属性。

语法:object.className = classname

举个例子,下面代码展示了两种获得 <body> 元素的 class 属性的方法:

<html>
<body id="myid" class="mystyle">

<script type="text/javascript">
x=document.getElementsByTagName('body')[0];
document.write("Body 的 CSS class: " + x.className);
document.write("<br />");
document.write("一种替代方法: ");
document.write(document.getElementById('myid').className);
</script>

</body>
</html>

输出:

Body 的 CSS class: mystyle
一种替代方法: mystyle

className属性可以为网页内的某个元素指定一个css样式来更改该元素的外观。假如该元素已指定一个样式,也可以利用className属来更改其样式。

<html>
<head>
<title>className属性使用实例</title>
<style>
.one{
border:1px solid;
width:200px;
height:300px;
background:#eeefff;
}
.two{
border:1px solid;
width:300px;
height:350px;
background:#efefef;
}
</style>
</head>
<body>
<div id="a">这是a元素,默认没有指定任何显示方式,点击下面按扭为其添加一个样式</div>
<input type="button" value="添加样式" onclick="add_class()"/>
<div id="b" class="one">这是b元素,已经指定了一个样式,可以点击下面按扭更改其外观</div>
<input type="button" value="更改外观" onclick="up_class()"/>
</body>
<script language="javascript">
function add_class(){
var a = document.getElementById("a");
a.className = "one";
}
function up_class(){
var b = document.getElementById("b");
b.className = "two";
}
</script>
</html>
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们