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演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学 ...
随机推荐
- Sourcetree 更新git账号密码
删除Sourcetree 缓存文件(只需要删密码文件),文件位置: Mac: ~/Library/Application Support/SourceTree Windows: C:\Users\US ...
- iOS - AsyncSocket 的使用
1.AsyncSocket 基于 CFSocket.GCD 进行的封装(OC). 支持 TCP 和 UDP. 完整的回调函数(用于处理各种回调事件,连接成功,断开连接,收到数据等). 需要注意的问题: ...
- CFS调度器
一.前言 随着内核版本的演进,其源代码的膨胀速度也在递增,这让Linux的学习曲线变得越来越陡峭了.这对初识内核的同学而言当然不是什么好事情,满腔热情很容易被当头浇灭.我有一个循序渐进的方法,那就是先 ...
- 检测到 Mac 文件格式: 请将源文件转换为 DOS 格式或 UNIX 格式
非常简单可以解决: 方法一,用editplus打开,再复制回VS 方法二:在VS中,点文件->高级保存选项,然后在行尾选项中选择windows(CR LF),重新编译,ok
- Apache优化：修改最大并发连接数（转）
Apache是一个跨平台的web服务器,由于其简单高效.稳定安全的特性,被广泛应用于计算机技术的各个领域.现在,Apache凭借其庞大的用户数,已成为用户数排名第一的web服务器. 尽 管如此,在实际 ...
- Spring中的内部Bean
简介 当一个bean仅被用作另一个bean的属性时,它能被声明为一个内部bean,为了定义inner bean,在Spring 的 基于XML的 配置元数据中,可以在 <property/> ...
- webservice快速入门-使用wsimport生成ws服务端（二）
上个例子演示的是在当前项目下发布的Webservice Server,而实际应用中和Client是分离的,本文介绍两种客户端开发方式: 1.导出WebService服务端服务接口到jar包,客户端引入 ...
- Java总结篇系列：Java多线程（四）
ThreadLocal是什么 早在JDK 1.2的版本中就提供java.lang.ThreadLocal,ThreadLocal为解决多线程程序的并发问题提供了一种新的思路.使用这个工具类可以很简洁地 ...
- HTML5背景音乐的暂停与播放
HTML代码: <audio id="myaudio" loop="loop" preload="auto" autoplay ...
- [svc][op]关闭linux centos各种声音
现在基本都用xshell了,直接xshell禁止即可 shell报警 #vi /etc/inputrc ================================ set bell-style ...