javascript 之 className属性

最新推荐文章于 2024-06-10 22:18:41 发布

weixin_30888027

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量130

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jizhongjing/p/5039186.html

版权

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

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

　　代码如下：

 1 <html> 
 2 <head> 
 3 <title>追加CSS类别</title> 
 4 <style type="text/css"> 
 5 .myUL1{ 
 6 　　color:#0000FF; 
 7 　　font-family:Arial; 
 8 　　font-weight:bold; 
 9 } 
10 .myUL2{ 
11　　 text-decoration:underline; 
12 } 
13 </style> 
14 <script language="javascript"> 
15 function check(){ 
16 　　var oMy = document.getElementsByTagName("ul")[0]; 
17 　　oMy.className = " myUL2"; //修改CSS类 
18 } 
19 </script> 
20 </head> 
21 <body> 
22 <ul onclick="check()" class="myUL1"> 
23 　　<li>HTML</li> 
24 　　<li>JavaScript</li> 
25 　　<li>CSS</li> 
26 </ul> 
27 </body> 
28 </html>

　　运行结果：

　　点击之后为

　　2、追加css类别

 1 <html> 
 2 <head> 
 3 <title>追加CSS类别</title> 
 4 <style type="text/css"> 
 5 .myUL1{ 
 6 　　color:#0000FF; 
 7 　　font-family:Arial; 
 8 　　font-weight:bold; 
 9 } 
10 .myUL2{ 
11 　　text-decoration:underline; 
12 } 
13 </style> 
14 <script language="javascript"> 
15 function check(){ 
16 　　var oMy = document.getElementsByTagName("ul")[0]; 
17 　　oMy.className += " myUL2"; //追加CSS类,注意" myUL2"前面的空格. 
18 } 
19 </script> 
20 </head> 
21 <body> 
22 <ul onclick="check()" class="myUL1"> 
23 　　<li>HTML</li> 
24　　 <li>JavaScript</li> 
25　　 <li>CSS</li> 
26 </ul> 
27 </body> 
28 </html>

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

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

　　运行结果如下：

　　　　点击之后为

转载于:https://www.cnblogs.com/jizhongjing/p/5039186.html

weixin_30888027

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 之 className属性

　　Javascript 可以通过className 属性灵活的更改一个标签元素的CSS 类选择器来实现样式的变化。　　1、用className 属性修改节点的css类别　　代码如下： 1 <html> 2 <head> 3 <title>追加CSS类别</title> 4 <style type="text/...
复制链接

扫一扫