正文

javascript控制类名（className 属性）

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0618

书写过程中注意JavaScript定义变量赋值里面的不能使用JavaScript关键词与JavaScript保留字

语法：object.className = classname

作用:

  1. 获取元素的class 属性
  2. 为网页内的某个元素指定一个css样式来更改该元素的外观

看看下面代码，获得 <p> 元素的 class 属性和改变className：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>className 属性</title>
<style type="text/css">
.one{
width: 200px;
height: 200px;
color: red;
background-color: green;
text-align: center;
line-height: 200px;
}
.two{
color: white;
background: #f90;
}
</style>
</head>
<body>
<p class="one" id="con">学习javascipt在路上</p>
<input type="button" name="" id="" value="切换class样式" onclick="mystr()"/>
<script type="text/javascript">
var mycon = document.getElementById('con');
document.write('<br />'+'<p>元素原本的Class值为:'+mycon.className);//输出p元素的class属性
function mystr(){
mycon.className='two';//改变className属性值
}
</script>
</body>
</html>