参考：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. C语言字符串与字符数组

    字符串儿与字符数组 字符数组的定义: Char buffer[]; 字符数组初始化: Char buffer1[]="hello world"; 利用scanf输入一个字符串儿 代 ...

  2. Create CSS3 Buttons Compatible with All Browsers

    Create CSS3 Buttons Compatible with All Browsers http://www.ourtuts.com/create-css3-buttons-compatib ...

  3. TF/IDF计算方法

    FROM:http://blog.csdn.net/pennyliang/article/details/1231028 我们已经谈过了如何自动下载网页.如何建立索引.如何衡量网页的质量(Page R ...

  4. ios 中定时器:NSTimer, CADisplayLink, GCD

    #import "ViewController.h" #import "RunloopViewController.h" @interface ViewCont ...

  5. 滤镜简单demo(转，供参考)

    NSURL *iamgeUrl = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"default" ...

  6. 对日期和时间的处理 NSCalendar

    代码较老,供参考 NSCalendar用于处理时间相关问题.比如比较时间前后.计算日期所的周别等. 1. 创建或初始化可用以下方法 + (id)currentCalendar; 取得当前用户的逻辑日历 ...

  7. c++ 16 this 和 继承 及继承机制中的构造函数 与 析构函数

    #include <iostream> #include <string> using namespace std; class Animal { public: Animal ...

  8. Ubuntu 14.04 启用休眠

    Ubuntu 14.04 启用休眠 Ubuntu 14.04 默认不启用关机菜单中的休眠选项.前提是要有swap分区(网上查询,未验证是否一定需要.PS:swap要不小于物理内存)不过首先最好还是确认 ...

  9. 论反馈信息如何推动 IT 运维团队进步？

    我们还记得<快乐大本营>中经典游戏----快乐传真吗?游戏规则是:很多人站一排,只有第一个人才看到最准确的信息,用东西隔着,戴耳机,一一将从前一个人获得的信息传递下去,最后一个人说出推测的 ...

  10. ***php 数组添加关联元素的方法小结(关联数组添加元素)

    我们这里介绍的是在数组中再增加关联数组了,这个就合成了多维数组,下面我来给大家举几个实例,希望对各位同学会有所帮助哈. 在"php 数组添加元素方法总结这篇文章中介绍了如何给数组添加元素,那 ...