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. Python中关于集合的介绍及用法

    一.集合的含义及创建方法 集合(set)是一种无序的并且里面存放不同元素的序列. 集合可以使用大括号 { } 或者 set() 函数创建集合,注意:创建一个空集合必须用 set() 而不是 { },因 ...

  2. 2、python中的数字

    第二篇开始谈谈python中的数据. 一.前言 python中的数字包含了整数.浮点数.复数三种.在python的早期版本,或许可以看到正数被分为长整数与短整数,后来被取消了,因此这里不作讨论.通常我 ...

  3. 矩阵乘法在hadoop的实现

    先随机生成一个矩阵,矩阵的行数与列数由用户输入: #!/bin/bashfor i in `seq 1 $1`do for j in `seq 1 $2` do s=$((RANDOM%100)) e ...

  4. Mdrill集群安装

    Mdrill集群安装 mdrill是阿里妈妈-adhoc-海量数据多维自助即席查询平台下的一个子项目.旨在帮助用户在几秒到几十秒的时间内,分析百亿级别的任意维度组合的数据.mdrill是一个分布式的在 ...

  5. 3 View - Response对象

    1. HttpResponse对象:返回数据 from django.http import HttpResponse 在django.http模块中定义了HttpResponse对象的API Htt ...

  6. MySQL基础9-主键约束、外键约束、等值连接查询、一对一和多对多关系

    1.主键约束和外键约束 外键约束 * 外键必须是另一表的主键的值(外键要引用主键!) * 外键可以重复 * 外键可以为空 * 一张表中可以有多个外键! 概念模型在数据库中成为表 数据库表中的多对一关系 ...

  7. Maven web项目的项目如何创建

    1.eclipse--创建maven项目--选择打包方式为war 2.此时项目还缺少一些东西,比如web-inf,web.xml配置文件之类的 3.项目右键-properties-project fa ...

  8. 平衡树 - Luogu 1486 郁闷的出纳员

    这么久没写平衡树了,再来一发... P1486 郁闷的出纳员 题目描述 OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的工资.这本来是一份不错的 ...

  9. 什么是虚假唤醒 spurious wakeup

    解释一下什么是虚假唤醒? 说具体的例子,比较容易说通. pthread_mutex_t lock; pthread_cond_t notempty; pthread_cond_t notfull; v ...

  10. LFTP下载远程文件

    拓展阅读: https://linux.cn/article-5460-1.html