夏日博客

A-A+

javascript修改html元素的class实例

2016年01月20日 前端设计 暂无评论 阅读 5 views 次

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

  1. <script type="text/javascript">  
  2.  function over(){  
  3.   var para = document.getElementById("testPara").className = "testOver";   
  4.  }  
  5.  function out(){  
  6.   var para = document.getElementById("testPara").className = "testNormal";   
  7.  }   
  8. </script>  

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

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

CSS,CSS代码设置了两个测试用的样式,代码如下:

  1. .testNormal {   
  2.  border:1px solid black;  
  3.  }  
  4. .testOver {  
  5.  background:#999999;  
  6.  border:1px solid black;   
  7.  font-weight:bold;   
  8.  padding:3em;  
  9.  }  
标签：

给我留言