javascript 之 className属性

　　Javascript 可以通过className 属性灵活的更改一个标签元素的CSS 类选择器来实现样式的变化。

　　1、用className 属性修改节点的css类别

　　代码如下：

 <html>

 <head>

 <title>追加CSS类别</title>

 <style type="text/css">

 .myUL1{

 　　color:#0000FF;

 　　font-family:Arial;

 　　font-weight:bold;

 }

 .myUL2{

11　　 text-decoration:underline;

 }

 </style>

 <script language="javascript">

 function check(){

 　　var oMy = document.getElementsByTagName("ul")[0];

 　　oMy.className = " myUL2"; //修改CSS类

 }

 </script>

 </head>

 <body>

 <ul onclick="check()" class="myUL1">

 　　<li>HTML</li>

 　　<li>JavaScript</li>

 　　<li>CSS</li>

 </ul>

 </body>

 </html>

　　运行结果：

　　点击之后为

　　2、追加css类别

 <html>

 <head>

 <title>追加CSS类别</title>

 <style type="text/css">

 .myUL1{

 　　color:#0000FF;

 　　font-family:Arial;

 　　font-weight:bold;

 }

 .myUL2{

 　　text-decoration:underline;

 }

 </style>

 <script language="javascript">

 function check(){

 　　var oMy = document.getElementsByTagName("ul")[0];

 　　oMy.className += " myUL2"; //追加CSS类,注意" myUL2"前面的空格.

 }

 </script>

 </head>

 <body>

 <ul onclick="check()" class="myUL1">

 　　<li>HTML</li>

24　　 <li>JavaScript</li>

25　　 <li>CSS</li>

 </ul>

 </body>

 </html>

　　运行时，单击列表后，实际上<ul> 的class 属性变为：
　　　　<ul onclick="check()" class="myUL1 myUL2">

　　所以添加css类别的时候类名之前一定要添加空格，才可以实现属性追加。重要的事情说三遍，加空格！加空格！！加空格！！！

　　运行结果如下：

　　　　点击之后为

巴特西

javascript 之 className属性

最新文章

热门文章