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属性的更多相关文章

  1. (四)学习JavaScript之className属性

    参考:http://www.w3school.com.cn/jsref/prop_classname.asp HTML DOM Anchor 对象 定义和用法 className 属性设置或返回元素的 ...

  2. javascript中ClassName属性的详解与实例

    在javascritp中,我们可以通过style属性可以控制元素的样式,从而实现行为层通过DOM的style属性去干预显示层显示的目标,但是这种方法是不好的,而且为了实现通过DOM脚本设置的样式,你不 ...

  3. JavaScript之ClassName属性学习

    在前面的style属性学习中,知道了通过style属性可以控制元素的样式,从而实现了行为层通过DOM的style属性去干预变现层显示的目地,但是这种就是不好的,而且为了实现通过DOM脚本设置的样式,你 ...

  4. JavaScript控制类名（className属性）

    语法:object.className =classname   (注意大小写) 作用:获取元素的class属性,为网页内的某个元素指定一个CSS样式来更改该元素的外观 示例: <!DOCTYP ...

  5. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  6. JavaScript之Style属性学习

    当CSS使用伪类开始侵入DOM和JavaSCript所控制着的行为层时,DOM和JavaScript也使用他们的一系列样式去控制表现层,这篇随笔主要说的就是利用JavaScript去控制元素的表现形式 ...

  7. javascript中类的属性研究

    原文:javascript中类的属性研究 本篇文章主要针对javascript的属性进行分析,由于javascript是一种基于对象的语言,本身没有类的概念,所以对于javascript的类的定义有很 ...

  8. JS之ClassName属性使用

    一.style与className属性的对比 在前面的style属性学习中,知道了通过style属性可以控制元素的样式,从而实现了行为层通过DOM的style属性去干预变现层显示的目地,但是这种就是不 ...

  9. JavaScript DOM 元素属性 状态属性

    JavaScript DOM 元素属性 状态属性 版权声明:未经允许,严禁转载! 元素的属性 核心 DOM 为我们提供了操作元素标准属性的统一 API. 所有属性节点都储存在元素的 attribute ...

随机推荐

  1. 关于在namanode上编写脚本控制DataNode的...

    脚本如下:(我的虚拟机名字分别为:wang201 wang 202 wang 203 wang 204) params=$@ i= ; i <= ; i++)) ; do echo ====== ...

  2. Windows Server 2008 正式版下载汇总

    windows 2008是微软推出的新一代服务器专用系统版本, 具有良好的用户体验以及应用程序,windows 2008大幅提升了web服务以及应用程序的性能, 让企业在提供和维护资源服务的时候更加得 ...

  3. 2017 ACM-ICPC网络赛 H.Skiing 有向图最长路

    H.Skiing In this winter holiday, Bob has a plan for skiing at the mountain resort. This ski resort h ...

  4. linux lvm扩容

    1.分区,  查看磁盘使用:fdisk -l 对磁盘分区:fdisk /dev/sdb 2.创建pv pvcreate /dev/sdb1 查看pv: pvdisplay 3.查看vg  vgdisp ...

  5. Linux命令之---pwd

    命令简介 Linux中用 pwd 命令用来查看”当前工作目录“的完整路径. 命令格式 pwd [选项] 命令功能和参数 功能:查看”当前工作目录“的完整路径:参数:一般情况下不带任何参数,如果目录是链 ...

  6. javaScripct入门教程

    1.JavaScript环境安装 JavaScript是一个轻量级的编程语言,安装自然很简单. a.打开你的电脑,找到一个Web浏览器,再找一个文本编辑器(比如记事本) b.没有了... 2.Java ...

  7. (JAVA指针),对象引用问题

    引出指针 从表面上看JAVA是没有指针的,或者是说,弱化了指针.但是指针在JAVA中还是真真切切存在的.在Java中我们称之为引用. String a;//引用为空 String a  = new S ...

  8. 4 Template层-验证码

    1.验证码 在用户注册.登录页面,为了防止暴力请求,可以加入验证码功能,如果验证码错误,则不需要继续处理,可以减轻一些服务器的压力 使用验证码也是一种有效的防止crsf的方法 验证码效果如下图: 官网 ...

  9. Day24&25&26&27：HTML+CSS

    1.网页得三大组成:HTML(标签.皮影的小人) \CSS(布局,皮影的装束) \JS(动作,皮影的操纵者) 2.HTML目录树 3.HTML-标签 成对<>组成,不区分大小写,自闭合标签 ...

  10. 47.关于gradle的解疑

    Short Answer Gradle is a build system. Long Answer Before Android Studio you were using Eclipse for ...