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. nuxt.js express模板项目虚拟目录部署问题汇总

    声明环境 反向代理:nginx或者iis的ARR 模板项目:nuxt-express 部署环境:windows 经过了一段时间在windows环境部署项目来看,关于虚拟目录的问题汇总如下, 发布场景假 ...

  2. django处理上传文件配置

    1.sttings中配置 'django.template.context_processors.media' TEMPLATES = [ { 'BACKEND': 'django.template. ...

  3. 快速排序，对于相同元素的优化，c++

    #include<iostream>using namespace std; void middl(int &p,int &q,int &r)//找枢轴,然后把枢轴 ...

  4. Java并发模型框架

    构建Java并发模型框架 Java的多线程特性为构建高性能的应用提供了极大的方便,但是也带来了不少的麻烦.线程间同步.数据一致性等烦琐的问题需要细心的考虑,一不小心就会出现一些微妙的,难以调试的错误. ...

  5. 自定义View/ViewGroup的步骤和实现

    1.设置属性(供XML调用) 在res目录新建attrs.xml文件 <?xml version="1.0" encoding="utf-8"?> ...

  6. F#周报2019年第25期

    新闻 Azure Notebook概览 SpecFlow 3就在这里了! 使用新的Try .NET模版创建交互式文档 逐渐演化的.NET Core框架 Dylan与Linebreakers Oslo ...

  7. C# SQL数据库学习时遇到到一些异常

    1一些关于SqlHelper类的异常: DataAdapter.SqlHelper”的类型初始值设定项引发异常. ExecuteNonQuery.SqlHelper”的类型初始值设定项引发异常. Ex ...

  8. 3 View - Response对象

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

  9. poj2631 Roads in the North（求树的直径）

    Roads in the North Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2941   Accepted: 144 ...

  10. 【NopCommerce 3.1】asp.net mvc 利用jQuery from.js上传用户头像

    纯代码不解释. 在CusotmerControllers中添加上传方法 /// <summary> /// ajax上传用户头像 /// </summary> /// < ...