javascript 之 className属性

　　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

javascript 之 className属性相关推荐

JavaScript之ClassName属性学习
在前面的style属性学习中,知道了通过style属性可以控制元素的样式,从而实现了行为层通过DOM的style属性去干预变现层显示的目地,但是这种就是不好的,而且为了实现通过DOM脚本设置的样式,你 ...
JavaScript中classList属性和className的区别
className 在操作类名时,需要通过className属性添加,删除和替换类名.因为className是一共字符串,所以即使只修改字符串一部分,也必须每次都设置整个字符串的值. var a = ...
JavaScript之Style属性学习
当CSS使用伪类开始侵入DOM和JavaSCript所控制着的行为层时,DOM和JavaScript也使用他们的一系列样式去控制表现层,这篇随笔主要说的就是利用JavaScript去控制元素的表现形式 ...
为什么 JavaScript 的私有属性使用 # 符号
这几天 JavaScript 的私有属性又成为了前端社区热议的话题.原因很简单,这家伙长这样: 惊不惊喜!意不意外! 而且 TC39 委员会以及对此达成了一致意见,并且该提案已经进入了 stage 3 ...
JavaScript实现私有属性
JavaScript实现私有属性原文:JavaScript实现私有属性 JavaScript被很多人认为并不是一种面向对象语言,原因有很多种,比如JavaScript没有类,不能提供传统的类式继承: ...
如何列出JavaScript对象的属性？
本文翻译自:How to list the properties of a JavaScript object? Say I create an object thus: 假设我创建了一个对象: va ...
JavaScript中的属性:如何遍历属性
JavaScript中的属性:如何遍历属性在JavaScript中,遍历一个对象的属性往往没有在其他语言中遍历一个哈希(有些语言称为字典)的键那么简单.这主要有两个方面的原因:一个是,JavaScr ...
JavaScript 访问对象属性和方法及区别
这篇文章主要介绍了浅析JavaScript访问对象属性和方法及区别的相关资料,仅供参考属性是一个变量,用来表示一个对象的特征,如颜色.大小.重量等:方法是一个函数,用来表示对象的操作,如奔跑.呼吸. ...
[转] JavaScript中的属性:如何遍历属性
在JavaScript中,遍历一个对象的属性往往没有在其他语言中遍历一个哈希(有些语言称为字典)的键那么简单.这主要有两个方面的原因:一个是,JavaScript中的对象通常都处在某个原型链中,它会从 ...

javascript 之 className属性

javascript 之 className属性相关推荐

最新文章

热门文章