js学习笔记20----addClass，removeClass函数封装
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>addClassName , removeClassName</title>
</head>
<body>
<div id="div1" class="bb">
div1
</div>
<div id="div2" class="box dd bb">
div2
</div>
<script type="text/javascript">
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
addClass(oDiv1 , 'box');
removeClass(oDiv2,'box'); function addClass(obj,className){
//如果原来没有class
if(obj.className == ""){
obj.className = className;
}else{
var _index = classIndexOf(obj,className);
//如果原来没有这个新加的class
if(_index == -1){
obj.className += " " + className;
}
}
} function removeClass(obj,className){
//如果以前的元素不为空
if(obj.className != ""){
var arrClassName = obj.className.split(" ");
var _index = classIndexOf(obj,className);
//如果存在要删除的class
if(_index != -1){
arrClassName.splice(_index,1);
}
obj.className = arrClassName.join(" ");
}
} //检验是否包含有某一个class
function classIndexOf(obj,v){
var arrClassName = obj.className.split(" ");
for(var i=0;i<arrClassName.length;i++){
if(arrClassName[i] == v){
return i;
}
}
return -1;
}
</script>
</body>
</html>
js学习笔记20----addClass，removeClass函数封装的更多相关文章
- js学习笔记之自调用函数、闭包、原型链
自调用函数 var name = 'world!'; // console.log(typeof name) (function () { console.log(this.name, name, ...
- JS学习笔记（三）函数
js中的方法名一般都是首字母小写,其余单词首字母大写的规范. 声明 function 函数名(参数列表) { // 函数体 return 返回值; } 调用 函数名(); (js中花括号喜欢用这种方式 ...
- 【JS学习笔记】关于function函数
函数的基本格式 function 函数名() { 代码: } 函数的定义和调用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- JS学习笔记 - fgm练习 2-5 - 函数传参 设置div样式
练习地址:http://www.fgm.cc/learn/lesson2/05.html <script> window.onload = function(){ var oDiv = d ...
- WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）
WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...
- JS 学习笔记--9---变量-作用域-内存相关
JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
- WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法
WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...
- WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...
- WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用 本文所使用到的demo演示: 高光贴图Demo演示 反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学 ...
随机推荐
- RabbitMQ与.net core(一)安装
一.安装Erlang环境 前提:erlang版本与rabbitmq版本需按照要求对应!!! 1.在安装erlang之前先安装下依赖文件(这一步不要忘掉了, 不然后面./configure的时候要报错) ...
- PO_员工主管审批模式详解（设定）
2014-06-03 Created By BaoXinjian
- 线程的属性和 线程特定数据 Thread-specific Data
一.posix 线程属性 POSIX 线程库定义了线程属性对象 pthread_attr_t ,它封装了线程的创建者可以访问和修改的线程属性.主要包括如下属性: 1. 作用域(scope) 2. 栈尺 ...
- Python 字典 in 操作符
描述 Python 字典 in 操作符用于判断键(key)是否存在于字典(D)中,如果键在字典中返回True,否则返回False. 在Python2中还可以使用 has_key() 方法,官方文档推荐 ...
- NRF24L01使用外部中断读取数据的问题
NRF24L01读取数据不能使用中断的方式,原因如下: 首先NRF24L01中断触发时,IRQ引脚会一直保持低电平直到状态寄存器中的中断标志被重新清零. stm32的外部中断触发方式只有上升沿或者下降 ...
- mysql-5.7 Using Asynchronous I/O on Linux详解
一.mysql - innodb 使用异步IO的场景 总的来说innodb 只会对数据文件采用异步IO,为了保存日志是真正被写入到磁盘,innodb不会对日志文件启用异步IO 更新细一步的说,inno ...
- MATLAB（4）——图片保存方法汇总及常用指令
作者:桂. 时间:2017-03-03 19:30:03 链接:http://www.cnblogs.com/xingshansi/p/6498318.html 前言 本文为MATLAB系列第四篇. ...
- string.format的用途联想
还有IFormattable,感觉这辈子都用不到.. 设想了一个物品简介界面 分别是Title,分割线,内容. "{0:Red} \n {1:S1} \n 简介 \n {2:Green}&q ...
- 【Android】5.2 图像按钮和图片格式
分类:C#.Android.VS2015: 创建日期:2016-02-07 一.简介 1.ImageBtton ImageBtton的用法和Button相似,也有Click事件,用法也和Button一 ...
- 写个关于使用cocostudio Armature实现动画自由切换的小demo
这是一个关于使用cocostudio实现动画自由切换的小demo auto sprite =Sprite::create("background.png"); sprite-> ...