参考：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. EXPLAIN句法 优化表结构

    EXPLAIN tbl_name or EXPLAIN SELECT select_options EXPLAIN tbl_name是DESC[RIBE] tbl_name或SHOW COLUMNS ...

  2. excle,aspose.cells 公式字段值取不到 xmls转xml

    问题: 一,单元格如果是公式的,读出值为0 aspose.cells 4.4.0.5版本 由于太低,读xmls后缀的excel文件时,发现如果此列是公式算出来的,值是获取不到的.获取到的值一直是0 二 ...

  3. 汽车之家, 比亚迪等成为开源数据库SSDB的用户

    开源的 NoSQL 数据库 SSDB 已经一岁多了! 在这一年中, SSDB 不断被应用在众多业界知名互联网企业, 创业团队的产品中. 最近, 比亚迪汽车也成为 SSDB 的用户, 其将 SSDB 作 ...

  4. 【BZOJ 1009】 [HNOI2008]GT考试

    Description 阿申准备报名参加GT考试,准考证号为N位数X1X2....Xn(0<=Xi<=9),他不希望准考证号上出现不吉利的数字.他的不吉利数学A1A2...Am(0< ...

  5. bnuoj 27874 "Center" of [p]erimeter midpoints(计算几何)

    http://www.bnuoj.com/bnuoj/problem_show.php?pid=27874 [题意]: 给你一个三角形三个顶点的坐标ABC,三角形各边取一点DEF,将三角形周长平均分割 ...

  6. 1874 素数和最大 - Wikioi

    题目描述 Description 有一天萌萌哒Sevenkplus在跟素数们玩>_<...他玩着玩着突然想到一个问题!就是这样的:    从1到n这n个自然数中,选出一些数使得它们之间两两 ...

  7. 通过PLSQL Developer导入SQL文件

    1.点击“工具” 2.选中其中的“导入表(L)”,在按下图所示操作: PLSQL Developer会自动运行相关命令,在Tables中刷新即可看到新导入的表.

  8. 【概率】poj 2096:Collecting Bugs

    Description Ivan is fond of collecting. Unlike other people who collect post stamps, coins or other ...

  9. linux服务器初步印象，远程连接mysql数据库，传输文件，启动/关闭tomcat命令

    1.连接服务器数据库,以Navicat连接mysql为例 1.1 常规 新建连接,连接名,主机名或ip地址:127.0.0.1 端口:3306用户名:(服务器端)root密码:(服务器端)pwd 1. ...

  10. Flask, Tornado, GEvent, 以及它们的结合的性能比较

    Flask, Tornado, GEvent, 以及它们的结合的性能比较 英文: http://blog.wensheng.com/2011/10/performance-of-flask-torna ...