参考：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. 归档 NSKeyedArchiver

    复杂对象无法象 NSString,NSArray等简单对象一样直接通过 writeToFile 实现持久化,当对复杂对象进行持久化时需要将其转化为 NSData (归档),但获取数据时,将 NSDat ...

  2. JPA2 关于 PagingAndSortingRepository

    And --- 等价于 SQL 中的 and 关键字,比如 findByUsernameAndPassword(String user, Striang pwd): Or --- 等价于 SQL 中的 ...

  3. C#取中间文本

    /// <summary> /// 取中间文本 + static string GetMiddleStr(string oldStr,string preStr,string nextSt ...

  4. sqlmap映射继承机制及映射字段顺序与SQL查询字段顺序无关

    <typeAlias alias="TblSpPartsinfo" type="com.bn.car.biz.supply.dao.po.PartsInfoPO&q ...

  5. hdu 4657 Find Permutation

    思路:用一个数组index[]存放a的下标,初始化令a[i]=c[i]=index[i]=i; 假设当前处理的i,初始时令cur=i:j为大于i的任意值.每次操作找a[l]=c[cur]-b[cur] ...

  6. [itint5]根据前序后序遍历统计二叉树

    http://www.itint5.com/oj/#28 这题有意思.一开始还想不清楚,看了解释,很棒. 这个题目的特殊之处是所有节点的值都是不一样的. 所以递归过程可以大大简化. 先看两种遍历的性质 ...

  7. java中dao层和service层的区别是什么？

    首先解释面上意思,service是业务层,dao是数据访问层.呵呵,这个问题我曾经也有过,记得以前刚学编程的时候,都是在service里直接调用dao,service里面就new一个dao类对象,调用 ...

  8. Android：requestWindowFeature应用程序窗体显示状态操作

    注意requestWindowFeature必须在 setContentView()之前调用. 1.DEFAULT_FEATURES:系统默认状态,一般不需要指定 2.FEATURE_CONTEXT_ ...

  9. POJ2109——Power of Cryptography

    Power of Cryptography DescriptionCurrent work in cryptography involves (among other things) large pr ...

  10. POJ1573——Robot Motion

    Robot Motion Description A robot has been programmed to follow the instructions in its path. Instruc ...