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演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学 ...
随机推荐
- AP_应付模组在月结的处理
2014-06-04 Created By BaoXinjian 1. 完成所有交易及检查Interface (1). Invoice and Credits (2). Prepa ...
- UNIX域套接字编程和socketpair 函数
一.UNIX Domain Socket IPC socket API原本是为网络通讯设计的,但后来在socket的框架上发展出一种IPC机制,就是UNIX Domain Socket.虽然网络soc ...
- 采用dlopen、dlsym、dlclose加载动态链接库
1.前言 为了使程序方便扩展,具备通用性,可以采用插件形式.采用异步事件驱动模型,保证主程序逻辑不变,将各个业务已动态链接库的形式加载进来,这就是所谓的插件.linux提供了加载和处理动态链接库的系统 ...
- 【C语言】调整数组使奇数所有都位于偶数前面（改动）
//调整数组使奇数全部都位于偶数前面. //输入一个整数数组.实现一个函数,来调整该数组中数字的顺序使得数组中全部的奇数位于数组的前半部分,全部偶数位于数组的后半部分 #include <std ...
- log4net 存储到oracle 调试 Could not load type [log4net.Appender.OracleAppender]
近期在弄webfrom oracle 调用 log4net 開始调试时不出数据,打开了log4net 自己的debug功能后发现: log4net: Logger [root] level set t ...
- (一)jQuery EasyUI 的EasyLoader载入原理
1.第一次看了官网的demo.引用的是EasyLoader.js文件,而不是引用jquery.easyui.min.js文件,我就有疑问了,百度一下. jQuery EasyUI是一款基于JQuery ...
- WebService之CXF注解之四（測试类）
TeacherTest.java: /** * @Title:TeacherTest.java * @Package:com.test.service * @Description: * @autho ...
- java.lang.IllegalStateException:Fragment XXXFragment{409864b0} not attached to Activity
现象: 这类bug产生的现象就是在Fragment还没添加到Activity中时,去调用了Fragment的getResources().getString(R.string.xxx)这样的函数. 原 ...
- ny710 外星人的供给站
外星人的供给站 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 外星人指的是地球以外的智慧生命.外星人长的是不是与地球上的人一样并不重要,但起码应该符合我们目前对生命基本 ...
- cocos2d-x 3.0点击响应
迄今为止,发现cocos2d-x 3.0最让人惊艳的地方就是更改了点击事件机制.(ps:迄今只看了点击事件这块,捂嘴笑~~~) cocos2d-x 2.0 只有CCLayer有点击事件处理,需要注册, ...