在javascritp中，我们可以通过style属性可以控制元素的样式，从而实现行为层通过DOM的style属性去干预显示层显示的目标，但是这种方法是不好的，而且为了实现通过DOM脚本设置的样式，你不得不花时间去研究javascrip函数，去寻找对应修改和设置样式的有关语句。而且每次修改和添加JS脚本的工作量远远大于我们修改CSS属性的量。

与其使用DOM修改元素样式，不如使用函数去更新他的CLASS属性来的实在一些。

ClassName属性

一个简单的无序列表，点击button之前ul的样式为uhh1

点击button后，调用check函数中的className将ul的样式由uhh1改为uhh2

<style type="text/css">

            .uhh1{color:#CCCCCC;font-size:12px;}

            .uhh2{color:#FF6600;font-size:24px;}

        </style>

        <script>

        function check()

        {

            var uul = document.getElementsByTagName("ul")[0];

            uul.className = "uhh2";

        }

        </script>

    </head>

    <body>

        <ul class="uhh1">

            <li><a href="#">首 页</a></li>

            <li><a href="#">新闻快讯</a></li>

            <li><a href="#">产品信息</a></li>

            <li><a href="#">联系我们</a></li>

            <br />

            <button onclick="check()">click me</button>

        </ul>

    </body>

                                   

ClassName属性可以获取或写入指定元素的Class属性。

语法：

 element.className

例

获取一指定元素的class属性，并写入一个新值

HTML代码：

<!DOCTYPE html>

    <head>

    </head>

    <body>

    <div id=“mochu” class="m">

    ........

    </div>

    </body>

</html>

javascript代码

 var element = document.getElementById("mochu");

 var classs = element.className;//获取它的CLASS属性

 element.className = newclass;//替换一个新的CALSS属性

例：

还有上面的HTML代码，向元素内加入一个新的CLASS属性

javascript代码

var element = document.getElementById("mochu");

var classs = element.className;//获取它的CLASS属性

classs += '';//加入一个空格

classs += newclass;//加入一个新的class属性

element.className = classs;//替换一个新的CALSS属性

这里需要注意的时，className属性，不能以新增加的方法写入class属性，必须获取老属性，然后合成字符串形式再写入！

javascript中ClassName属性的详解与实例的更多相关文章

  1. Javascript中prototype属性的详解

    原文链接:http://www.cnblogs.com/Uncle-Keith/p/5834289.html 在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象 ...

  2. JavaScript中的execCommand()命令详解及实例展示

    execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令.处理Html数据时常用如下格式:document.execCommand(sCommand[,交互方式, 动态参数]) ,其 ...

  3. javascript中=、==、===区别详解

    javascript中=.==.===区别详解今天在项目开发过中发现在一个小问题.在判断n==""结果当n=0时 n==""结果也返回了true.虽然是个小问题 ...

  4. JavaScript中return的用法详解

    JavaScript中return的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 t ...

  5. javascript 中合并排序算法 详解

    javascript 中合并排序算法 详解 我会通过程序的执行过程来给大家合并排序是如何排序的...  合并排序代码如下: <script type="text/javascript& ...

  6. javascript中的this作用域详解

    javascript中的this作用域详解 Javascript中this的指向一直是困扰我很久的问题,在使用中出错的机率也非常大.在面向对象语言中,它代表了当前对象的一个引用,而在js中却经常让我觉 ...

  7. JavaScript中this的用法详解

    JavaScript中this的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 thi ...

  8. JavaScript中数组Array方法详解

    ECMAScript 3在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的. 1.Array.join()方法 Array.join()方 ...

  9. JavaScript中的注释问题详解？ 部分3

    注释:解释代码的含义,浏览器中不执行. 方便其他程序员了解代码 ,也可以注释自己不需要的代码(开发过程中)! 1. 单行注释 // 用于一行代码上面 2.多行注释 /* */ 用于一段代码上面 或者是 ...

随机推荐

  1. phpStorm中使用xdebug工具调试docker容器中的程序

    前提准备 phpstorm开发软件 + dnmp(docker + nginx + mysql +php) 配置好hosts 映射比如 /etc/hosts      127.0.0.1 tp5.de ...

  2. Sass的混合-@mixin,@include

    1,无参数,有参数和带默认值参数的@mixin声明sass文件内容: //带参数,默认50@mixin opa($opa:50){ opacity: $opa / 100; filter:alpha( ...

  3. View相关面试问题-事件分发面试问题讲解

    为什么会有事件分发机制: 安卓上面的View是树形结构的,View可能会重叠在一起,当我们点击的地方有多个View都可以响应的时候,这个点击事件应该给谁呢?为了解决这一问题,就有了事件分发机制.用图来 ...

  4. D - A or...or B Problem

    题意:给定A,B,问[A,B]里取任意个数按位或,结果有多少种. 思路:这题需要找出一个分界点,即找到最高位的B是1,A是0的位置x(最低位从0开始),那么对于所有OR的结果,x处要么是1要么是0,x ...

  5. 关于注解-Hebernate与JPA(java persistence api)

    The JPA spec. defines the JPA annotation in the javax.persistence package. Hibernate not only implem ...

  6. MariaDB（MySql）使用储存过程和随机函数插入10万条数据

    ))default charset =utf8; #定义一个随机切割字符串的函数 delimiter // create function randStr() ) begin ) default 'A ...

  7. BZOJ 4003 / Luogu P3261 [JLOI2015]城池攻占 (左偏树)

    左偏树裸题,在树上合并儿子传上来的堆,然后小于当前结点防御值的就pop掉,pop的时候统计答案. 修改的话就像平衡树一样打懒标记就行了. 具体见代码 CODE #include<bits/std ...

  8. 题解 [SHOI2010]最小生成树

     题面 解析 看上去是黑题啊! 实际上也就是道网络流最大流. 当然,我们也知道网络流最关键的是建图. 首先,分析一下题目: 题目要求在操作后使给定的边lab一定在最小生成树上, 求最小的操作数. 先设 ...

  9. Centos7搭建CDH6.0.1(单机版)

    一.前言. 学习大数据组件,最好的方式是直接参照官网.不过官网的教程也让我吃了一坑,在此记录一下.因在个人笔记本资源有限,在此安装为单机版安装 二.搭建. 1.1配置主机名 hostnamectl s ...

  10. 如何利用fiddler4 抓取手机的数据包

    1.安装fiddler . 2.设置fiddler  .tool==> option里面  https 要打开,然后选择actions 第一个 安装本地证书: 3.设置手机访问的数据都要经过fi ...