在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. storcli/percli的使用场景

    目录 storcli/percli常用场景 storcli/percli常用场景 查看帮助信息 storcli64 help 查看控制器数量 storcli64 show ctrlcount [roo ...

  2. 7.JVM技术_java监控工具使用

    1.java监控工具使用 2.jconsole jconsole是一种集成了上面所有命令功能的可视化工具,可以分析jvm的内存使用情况和线程等信息 2.1.启动jconsole 通过JDK/bin目录 ...

  3. YII2组件之GridView

    采用的是yii2.0.14版本,为了学习方便,以问答式书写. 开始GridView GridView主要是为了实现表格复用,尤其我们做后台的时候,你发现表单和表格占据了大部分页面,而表格的样式又是高度 ...

  4. sql 178. 分数排名

    编写一个 SQL 查询来实现分数排名.如果两个分数相同,则两个分数排名(Rank)相同.请注意,平分后的下一个名次应该是下一个连续的整数值.换句话说,名次之间不应该有“间隔”. +----+----- ...

  5. java-udp编程

    TCP/IP UDP都是基于传输层的:而udp发送数据会出现丢包的情况,发送一个数据不管对方接收不接收,发送过去就完事了: udp的特点:将数据源和目的封装成数据包中,不要建立连接:(Datagram ...

  6. Numpy 文件读写

    NumPy 文件读写主要有二进制的文件读写和文件列表形式的数据读写两种形式 二进制的文件读写 save  np.save ("./文件名", 数组名):以二进制的格式保存数据 保存 ...

  7. NTP服务及时间同步

    环境: centos7 server   192.168.2.171 client    192.168.2.173.192.168.2.174 整体思路:173.174同步171的时间,171定时同 ...

  8. 虚拟dom比对原理

    dom对比步骤 1.用js对象来表达dom结构 tagName 标签名props 元素属性key 唯一标识children 子元素,格式和父元素一样count 有几个子元素,用于计算当前元素的索引,处 ...

  9. Oracle之：Function ：dateToNumber()

    create or replace function dateToNumber(i_date in date) return number is result number ; begin resul ...

  10. Machine Learning(Andrew Ng)学习笔记

    1.监督学习(supervised learning)&非监督学习(unsupervised learning) 监督学习:处理具有若干属性且返回值不同的对象.分为回归型和分类型:回归型的返回 ...