javascript中ClassName属性的详解与实例

墨初学习笔记1086

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

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

ClassName属性

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

ClassName属性

语法:

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属性

ClassName属性

javascript代码

var element = document.getElementById("mochu");var classs = element.className;//获取它的CLASS属性classs += '';//加入一个空格classs += newclass;//加入一个新的class属性element.className = classs;//替换一个新的CALSS属性

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

setAttribute属性

我们也可以利用javascript中提供的setAttribute属性,写入class属性,以及其属性值

这里不再多说,可以参考我以前的文章。

相关文章

jQuery ajax()使用serialize()提交form数据

jQuery ajax()使用serialize()提交form数据

这几天一直在适配用户中心插件,基本的功能也差不多了,时间不长就会上线用户中心,当然适配的过程中也遇到不少的问题,今天记录一下。jQuery的serialize()方法通过序列化表单值,创建URL编码文...

javascript中创建元素节点,文本节点与插入节点

javascript中创建元素节点,文本节点与插入节点

在javascript中提供了很多操作DOM文档的方法,当然也包括创建一个节点(元素),创建一个文本节点(text),还有把创建的节点插入到文档中去。createElement方法createElem...

PHP中include()与require()的区别说明(一)

require 的使用方法如 require("xxx.php"); 。这个函数通常放在 PHP 程序的最前面,PHP 程序在执行前,就会先读入 require 所指定引入的文件,...

PHP读取大文件的多种方法介绍

读取大文件一直是一个头痛的问题,我们像使用php开发读取小文件可以直接使用各种函数实现,但一到大文章就会发现常用的方法是无法正常使用或时间太长太卡了,下面我们就一起来看看关于php读取大文件问题解决办...

PHP+MySQL网站打开速度的几个因素

PHP+MySQL网站打开速度的几个因素

这几天有客户订制了一款主题,当然这款主题已经在zblog的应用中心开始审核,至于结果怎么样,还请大家关注我的博客。审核通过后,我会在博客里告诉大家一声的。当然本站用的自己写的主题《墨初VIP主题》还在...

javascript中的innerHTML属性有什么作用

javascript中的innerHTML属性有什么作用

innerHTML在javaScript中具有双向功能,一是可以从指定的元素对象中获取内容,二是可以把自定义内容插入到指定的元素对象中去。定义和用法innerHTML属性用于设置或返回指定标签之间的H...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。