javascript中ClassName属性的详解与实例
在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属性的详解与实例的更多相关文章
- Javascript中prototype属性的详解
原文链接:http://www.cnblogs.com/Uncle-Keith/p/5834289.html 在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象 ...
- JavaScript中的execCommand()命令详解及实例展示
execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令.处理Html数据时常用如下格式:document.execCommand(sCommand[,交互方式, 动态参数]) ,其 ...
- javascript中=、==、===区别详解
javascript中=.==.===区别详解今天在项目开发过中发现在一个小问题.在判断n==""结果当n=0时 n==""结果也返回了true.虽然是个小问题 ...
- JavaScript中return的用法详解
JavaScript中return的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 t ...
- javascript 中合并排序算法 详解
javascript 中合并排序算法 详解 我会通过程序的执行过程来给大家合并排序是如何排序的... 合并排序代码如下: <script type="text/javascript& ...
- javascript中的this作用域详解
javascript中的this作用域详解 Javascript中this的指向一直是困扰我很久的问题,在使用中出错的机率也非常大.在面向对象语言中,它代表了当前对象的一个引用,而在js中却经常让我觉 ...
- JavaScript中this的用法详解
JavaScript中this的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 thi ...
- JavaScript中数组Array方法详解
ECMAScript 3在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的. 1.Array.join()方法 Array.join()方 ...
- JavaScript中的注释问题详解? 部分3
注释:解释代码的含义,浏览器中不执行. 方便其他程序员了解代码 ,也可以注释自己不需要的代码(开发过程中)! 1. 单行注释 // 用于一行代码上面 2.多行注释 /* */ 用于一段代码上面 或者是 ...
随机推荐
- 在Linux中,当需要从磁盘读取块时,进程状态会发生什么变化?被封锁了吗?如果是这样,如何选择另一个流程来执行?
当某个进程需要从磁盘中获取数据时,它实际上会停止在CPU上运行以让其他进程运行,因为该操作可能需要很长时间才能完成-至少需要5ms的磁盘寻道时间,而5ms就是1000万从程序的角度来看,CPU周期是永 ...
- 基于UDS的BootLoader
bootloader程序架构略有简化的bootloader图 这张图和恒润教程中的BootLoader流程大体是一致的. 疑问点 Q:图中的烧写顺序是34-36-34-36-34-36-37,但另一些 ...
- Linux系统的grub和BIOS加密
启动流程: BIOS ——> MBR(主引导记录,找到系统在哪个分区) ——> boot loader(grub) ——>kernel(内核)——>进入启动级别init 硬盘的 ...
- 配置lnmp时出现“file not found?
问题: 昨天测试并搭建lnmp架构,在测试过程中,挂载好测试环境时在浏览器上测试网站出现“file not found",使用命令curl时也出现”file not found", ...
- Vim——替换命令
原创声明:本文系博主原创文章,转载或引用请注明出处. 1. 文本替换 #替换每一行的第一个a :%s/a/b/ #全部替换 :%s/a/b/g #替换/时需要转义"\/" 2. ...
- JSP+Servlet+DAO+Javabean模式小记-20171029
1.Servlet的doPost方法使用request.getParameter()接收网页传送的form表单数据时,必须使用name属性,而不能使用id. 2.这是最简单的MVC模式,其中M(mod ...
- JZOJ 5988 珂学计树题 (Burnside引理)
什么神题a-没学过Burnside引理a学了也做不来系列-考场没怎么看这题,上最后十分钟打了样例就溜了-然后这题爆0了. Here CODE #include <cctype> #incl ...
- Trying to get property 'art_id' of non-object
“Trying to get property 'art_id' of non-object” 正在尝试获取非对象的“art-id”属性. 我之前也是这么写的没出问题<td>{{$ ...
- 通过JS完成电梯动画效果
实习单位要求做一个在Vue项目中比较能适配的来反映货梯当前状况的页面效果 用JS写了一个 <!DOCTYPE html> <html> <head> <met ...
- gdb插件gef安装爬坑
0x00: gdb是linux下的调试利器,但无奈界面不太友好,所以需要一些辅助插件. 0x01:关于插件选择 之前我一直使用的是pead,之前了解到还有个插件gef,因为gef支持多构架,而且hea ...