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消息队列（一）: Detailed Introduction 详细介绍[转]
1. 历史 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需求,虽然在同步消息通讯的世界里有 ...
- struts2 ValueStack详解，页面获取值el表达式、ognl表达式
http://www.blogjava.net/max/archive/2007/04/28/114417.html 我想用的是el表达式! http://www.cnblogs.com/belief ...
- django中models阅读笔记
一.使用数据库需要设置settings.py文件. DATABASES = { 'default': { 'ENGINE': 'django.db.backends.', # Add 'postgre ...
- javascript array操作
首先来看一下怎么判断一个对象是不是数组: 1.Array.isArray(obj) 调用数组的isArray方法 2.obj instanceof Array 判断对象是否是Array的实例 3.Ob ...
- PHP利用MySQL保存session(php5.4之前的处理)
简介 使用MySQL保存session,需要保存三个关键性的数据:session id.session数据.session生命期. 考虑到session的使用方式,没必要使用InnoDB引擎,MyIS ...
- 显示vim当前颜色主题
在vim内,查看colors_name :echo g:colors_name 如果值为空,那么默认为:default主题
- js获取控件位置以及不同浏览器中的差别
js获取控件位置(坐标位置)在不同浏览器中的差别. //获取坐标位置 function getpos(e) { var t=e.offsetTop; var l=e.offsetLeft; var h ...
- CCProgressTo和CCProgressTimer
在cocos2d中同样提供了很多表现图片和精灵的方式,上一篇当中提到的切换场景的方式之一是顺或逆时针切入的方法,在图片上也可以使用,test里有一个例子介绍CCProgressTimer可以实现一些图 ...
- jQuery.extend()中的布尔值的作用
jQuery.extend()中,第一个参数可以添加一个布尔值,表示是否深层拷贝,默认是false.但如果设置为true,则表示深层拷贝. 下面来看看什么是深层拷贝: <script type= ...
- 57. 3Sum【medium】
Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find all un ...