参考：http://www.w3school.com.cn/jsref/prop_classname.asp

HTML DOM Anchor 对象

定义和用法

className 属性设置或返回元素的 class 属性。

语法

object.className=classname

className作用:添加和替换class

<html>

<head>

    <title>添加和替换class</title>

    <style type="text/css">

        .on1 {

            font-size: 5em;

            color: red;

        }

        .on2{

            text-decoration: underline;

        }

        .on3 {

            color: blue;

        }

    </style>

    <script language="javascript">

        function addClass() {

            var a = document.getElementById('div1');

            a.className += " on2";//引号内容前面留一个空格，否则新旧两个class名称连在一起，没有效果。

        }

        function changeClass() {

            document.getElementById('div2').className = "on3";

        }

    </script>

</head>

<body>

    <div id="div1" onclick="addClass()" class="on1"></div>

    <div id="div2" onclick="changeClass()" class="on1"></div>

</body>

</html>

(四)学习JavaScript之className属性的更多相关文章

  1. javascript 之 className属性

    Javascript 可以通过className 属性灵活的更改一个标签元素的CSS 类选择器来实现样式的变化. 1.用className 属性修改节点的css类别 代码如下: <html> ...

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

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

  3. JavaScript之ClassName属性学习

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

  4. (五)学习JavaScript之firstChild 属性

    参考:http://www.w3school.com.cn/jsref/prop_node_firstchild.asp 定义和用法 firstChild 属性返回指定节点的首个子节点,以 Node ...

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

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

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

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

  7. JavaScript之Style属性学习

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

  8. 学习javascript数据结构(四)——树

    前言 总括: 本文讲解了数据结构中的[树]的概念,尽可能通俗易懂的解释树这种数据结构的概念,使用javascript实现了树,如有纰漏,欢迎批评指正. 原文博客地址:学习javascript数据结构( ...

  9. 从 prototype.js 深入学习 javascript 的面向对象特性

    从 prototype.js 深入学习 javascript 的面向对象特性 js是一门很强大的语言,灵活,方便. 目前我接触到的语言当中,从语法角度上讲,只有 Ruby 比它更爽. 不过我接触的动态 ...

随机推荐

  1. 权限管理数据库设计_Rev1

    贴出来自身接触项目以来所接触过的一些企业管理信息系统权限部门的一个通用数据库设计初稿: 设计的文字解释以及各部分的作用等确定可行会再进行描述: 图: 如果有不同意见请轻拍!

  2. kruskal算法-Pascal

    马上就快要考试了,然而突然发现自己图论已经废了,于是再都打一遍练练手...... const maxn=; maxe=maxn*maxn; type edge=record //edge记录每一条边, ...

  3. SVN弱密码扫描（Python）

    寂寞如雪的用脑过度,所以来写个博客分享一下.#虽然上一篇博客我还没写完 SVN的弱密码,看起来很复杂,但实际上很简单啊= =虽然不像pymssql/mymssql这种,Python提供了很好用的包,但 ...

  4. Duilib介绍以及各个类的简介

    转自http://note.sdo.com/u/icez/n/mvO-X~jyVnpFnM01A0000m DirectUI意为直接在父窗口上绘图(Paint on parent dc directl ...

  5. 1024: [SCOI2009]生日快乐 - BZOJ

    Description windy的生日到了,为了庆祝生日,他的朋友们帮他买了一个边长分别为 X 和 Y 的矩形蛋糕.现在包括windy,一共有 N 个人来分这块大蛋糕,要求每个人必须获得相同面积的蛋 ...

  6. 无法为请求的 Configuration 对象创建配置文件 错误原因

    Configuration config = WebConfigurationManager.OpenWebConfiguration("~"); 无法为请求的 Configura ...

  7. [笨木头FireFly01]入门篇1·最简单的服务端和客户端连接

    原地址:http://www.9miao.com/question-15-53938.html 最近一直在写游戏,几乎没有来写教程了,打算放慢一下脚步,学学新东西.那为嘛我要学FireFly呢? 之前 ...

  8. ***CI异常记录到日志：CodeIgniter中设计一个全局exception hook

    在CodeIgniter中,当发生异常时,经常要通知系统管理员,因此有必要在全局的高度上 捕捉异常,因此可以写一个hook, 比如在config目录的hook.php中,加入: $hook['pre_ ...

  9. php关于private、public成员变量访问问题

    如果类里面定义了__get($name)方法,则不论类的private成员还是public成员,都能够在类的外面通过类似$class->name访问到.如果是public变量,则不会自动调用ge ...

  10. POJ 1091 跳蚤 容斥原理

    分析:其实就是看能否有一组解x1,x2, x3, x4....xn+1,使得sum{xi*ai} = 1,也就是只要有任意一个集合{ai1,ai2,ai3, ...aik|gcd(ai1, ai2, ...