用javascript修改html元素的class

我们可以用javaScript来修改HTML元素的class属性，从而改变元素的样式。

实例JavaScript代码

需要注意的是在JavaScript中，如果要修改一个元素的class属性，一定要写为className，因为class是JavaScript的保留字。

<script type="text/javascript">
	function over(){
		var para = document.getElementById("testPara").className = "testOver"; 
	}
	function out(){
		var para = document.getElementById("testPara").className = "testNormal"; 
	}	
</script>

HTML代码

本例只需要一个段落，并且给它设置了默认的class属性“testNormal”，而鼠标划过和划出会分别触发上面的两个JavaScript函数，从而改变该段落自身的class属性。

<p id="testPara" class="testNormal" onmouseover="over()" onmouseout="out()">
    我是示例段落，鼠标滑过我，就可以改变我的class属性，从而改变应用的CSS规则。    
</p>

CSS

CSS代码设置了两个测试用的样式。

.testNormal { 
	border:1px solid black;
	}
.testOver {
	background:#999999;
	border:1px solid black; 
	font-weight:bold; 
	padding:3em;
	}

效果

我是示例段落，鼠标滑过我，就可以改变我的class属性，从而改变应用的CSS规则。

  1. 用javascript修改html元素的class
  2. JavaScript重定向
  3. JavaScript对象当作关联数组
  4. JavaScript弹出窗口以及窗口间的通信
  5. JavaScript显示信息实例
  6. 用JavaScript批量访问HTML元素
  7. 分离JavaScript与HTML
  8. JavaScript计算器实例
  9. JavaScript的Math对象计算器
  10. JavaScript改变HTML元素的位置
  11. JavaScript动画
  12. JavaScript动画函数
  13. JavaScript拖拽
  14. JavaScript拖拽2——多元素、分离JS
  15. JavaScript拖拽3——解决快速拖拽的问题
  16. addEventSimple函数，添加事件响应函数的方法
  17. addEventSimple观察鼠标事件
  18. JavaScript click事件深入
  19. JavaScript事件来源元素
  20. JavaScript修改与访问CSS
  21. JavaScript拖拽4——获得元素的位置
  22. JavaScript拖拽5——性能优化
  23. DOM Scripting相册
  24. DOM Scripting斑马表格
  25. DOM Scripting动画切图
  26. JavaScript颜色渐变
  27. JavaScript拖拽6——修复错误