参考：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. Cent os关机与重启命令详解

    Cent OS关机与重启命令详解 分类: Linux2012-10-02 14:06 5553人阅读 评论(0) 收藏 举报 centoslinuxsignallogin工作windows Linux ...

  2. Kinetic使用注意点--image

    new Image(config) 参数: config:包含所有配置项的对象. { image: "图片对象", crop: "图片裁剪对象", fill: ...

  3. mybatis的javaType和ofType

    都是指定对象的类型 不同的是当使用反向查询select从另一个maper文件中取出数据时必须用ofType 都可以为collection和association是指定对象的类型, 都不是必须写的, 只 ...

  4. 使用maven 命令运行项目

    安装好maven3 配置好环境变量后, 输入mvn -v 查看安装是否成功, 然后导入maven项目, 选择import 导入选择Exsting Maven Projects, 接下来就准备运行一下m ...

  5. iOS 跳转到系统的设置界面-b

    在项目中,我们经常会碰到使用位置的需求.当用户设置app不允许使用位置的时候,最好的用户体验就是直接调转到系统的位置设置界面,进行设置. 本人已经测试,在5c iOS8.3系统 和 5s iOS7.1 ...

  6. 演示demo开发问题及解决方案集锦

    模型处理问题: 1. 3Dmax模型导入Unity单位设置: 自定义->单位设置->系统单位设置与显示单位比例都调成厘米 2. 3Dmax中材质贴图: 点击材质编辑器[在模式下可以选择精简 ...

  7. linux 批量重命名文件

    模拟结果文件路径结构大概是:/当前目录/模型名/字模型名模拟/模拟温度/模拟结果文件. 模拟结果文件命名时相同的.模拟结果文件需要修改模拟结果文件的后缀名. 附shell脚本: find -type ...

  8. 使用Compass制作雪碧图

    遇见好的文章,笔者也会转载.但是正所谓好记性不如烂笔头,单纯的拿来主义也不如自己的亲自实践.所以每次需要转载的文章,我都会自己敲一遍,中间加入一些自己的思考. 这篇文章转载自:http://www.h ...

  9. Matlab中sortrows函数解析

    一.问题来源 返回检索到的数据(按相关度排序)在原始数据中的索引. 二.问题解析 x = [1 4 3 5; 1 3 2 6]:sortrows(x)其结果是按照row来排列,默认首先排第一列,1和1 ...

  10. ASP.NET MVC 数据分页思想及解决方案代码

    作为一个程序猿,数据分页是每个人都会遇到的问题.解决方案更是琳琅满目,花样百出.但基本的思想都是差不多的. 下面给大家分享一个简单的分页器,让初学者了解一下最简单的分页思想,以及在ASP.NET MV ...