参考：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. 商品库存SKU

    一种解决方案(性能垃圾,基本实现功能)商品表  属性集表 属性表 属性值表 SKU表 SKU选项表  属性集和属性之间的中间表表关系商品表  *--------------1  属性集表属性集表 *- ...

  2. 常见架构TLB miss处理方法（转）

    转自网站:http://blog.sina.com.cn/s/blog_633f462901018reb.html 0.       综述 总的来说TLB miss处理分为硬件处理和软件处理两种,硬件 ...

  3. C++中头文件相互包含与前置声明

    一.类嵌套的疑问 C++头文件重复包含实在是一个令人头痛的问题,前一段时间在做一个简单的数据结构演示程序的时候,不只一次的遇到这种问题.假设我们有两个类A和B,分别定义在各自的有文件A.h和B.h中, ...

  4. centos64位安装32位C/c++库

    yum install glibc.i686 glibc-devel.i686 yum install libstdc++.i686yum install libstdc++-devel.i686yu ...

  5. Firefly的角色跳转场景简单示例

    源地址:http://bbs.9miao.com/thread-45790-1-2.html 本例演示的是模拟游戏服务端,让角色在场景1中跳转到场景2中.在实际游戏中,client将要跳转的角色id和 ...

  6. Python中pass语句的作用

    http://mianshi.fenzhi.com/post/1529.html pass语句什么也不做,一般作为占位符或者创建占位程序,pass语句不会执行任何操作,比如:while False:p ...

  7. POJ 2318 TOYS && POJ 2398 Toy Storage（几何）

    2318 TOYS 2398 Toy Storage 题意 : 给你n块板的坐标,m个玩具的具体坐标,2318中板是有序的,而2398无序需要自己排序,2318要求输出的是每个区间内的玩具数,而231 ...

  8. mysql查看表的结构

    ①mysql > show create table 表名; ②mysql > desc 表名; ③mysql > describe 表名;

  9. java 布尔值一种赋值方法

    在研读jmeter的代码时发现一个很常见的布尔值赋值方式,记录下来备忘: public static void main(String[] args) { // TODO Auto-generated ...

  10. 【BZOJ 2453|bzoj 2120】 2453: 维护队列 （分块+二分）

    2453: 维护队列 Description 你小时候玩过弹珠吗? 小朋友A有一些弹珠,A喜欢把它们排成队列,从左到右编号为1到N.为了整个队列鲜艳美观,小朋友想知道某一段连续弹珠中,不同颜色的弹珠有 ...