习惯了jQuery已经写好的针对class的操作,最近看书也看到了针对className的操作,但书上的没有仔细地针对各个情况进行处理,于是自己就动手写了,进行了初步的测试,暂没发现问题。如果有问题请留言

//清除结尾和开头处的空白符
if (!String.trim) {String.prototype.trim = function () {return this.replace(/^\s+|\s+$/g, '');};
}/*** 取得包含元素className的数组* @param {Node} element*/function getClassName(element) {if (!(element = $(element))) {return false;}return element.className.replace(/\s+/g, ' ').split(' ');}/*** 检察院苏中是否存在某个className* @param {Node} element* @param {String} className* @return {Boolean}*/function hasClassName(element, className) {if (!(element = $(element))) {return false;}var classes = getClassName(element);for (var i = 0; i < classes.length; i++) {//检测className是否匹配,如果是则返回trueif (classes[i] === className) {return true;}}return false;}/*** 为元素添加className* @param element* @param className* @return {Boolean}*/function addClassName(element, className) {if (!(element = $(element))) {return false;}//将className添加到当前className的末尾//如果没有className,则不包含空格element.className += (element.className ? ' ' : '') + className;return true;}/*** 删除一个或多个类名* @param element* @param className* @return {Boolean}*/function removeClassName(element, className) {if (!(element = $(element))) {return false;}className = (className || '').trim().replace(/\s+/g, ' ');if (className === '') {//未定义或者空的情况为删除所有类名element.className = '';} else if (className.indexOf(' ') !== -1) {//对多个以空格为分隔的类名进行处理,然后迭代var classarr = className.split(' ');for (var i = 0; i < classarr.length; i++) {arguments.callee(element, classarr[i]);}} else {//对单个类名的处理className = (' ' + className + ' ');elemClass = ' ' + element.className + ' ';if (elemClass.indexOf(className !== -1)) {element.className = elemClass.replace(className, ' ').replace(/\s+/g, ' ').trim();} else {return false;}}}/*** 切换类名* @param element* @param className*/function toggleClassName(element, className) {if (!hasClassName(element, className)) {addClassName(element, className);} else {removeClassName(element, className);}}

  

转载于:https://www.cnblogs.com/webFrontDev/archive/2012/12/02/2798458.html

对css类名className的一些操作的函数相关推荐

  1. 原生Javascript 操作 css类名 - 踩坑篇

    文章目录 原生Javascript 操作 css类名 效果图示下: 案例 · 代码如下: 重要代码提示: 其他无关参考: 官方参考: 原生Javascript 操作 css类名 不建议用 .class ...

  2. HTML中设置鼠标悬停状态伪类,四大伪类,css鼠标样式设置,reset操作,静止对文本操作...

    本文将要为您介绍的是四大伪类,css鼠标样式设置,reset操作,静止对文本操作,教程操作方法:07.31自我总结 一.a标签的四大伪类 a:link{样式} 未访问时的状态(鼠标点击前显示的状态) ...

  3. 利用JavaScript对HTML和CSS实现简单的动态操作

    假如我们现在想通过JS对原本的HTML或者CSS的内容或样式进行改变,比如说显示或隐藏内容.弹出各类对话框.改变内容的property.打开关闭窗口等等,我们应该怎么做呢? 首先我们先了解几个常用的J ...

  4. day3 集合、文件操作、函数、局部变量

    文章目录 1.集合 2.文件操作 3.函数 4.局部变量 1.集合   集合是一个无序的,不重复的数据组合,它的主要作用如下:   1)去重,把一个列表变成集合,就自动去重了   2)关系测试,测试两 ...

  5. R 语言常用操作与函数汇总

    总结了一下 R 语言中常用的一些操作与函数使用,抛砖引玉,分享一下给大家,如有错误的地方欢迎留言指正. 怎样显示 R 软件中某个包中包含的全部数据集? > library(MASS)> d ...

  6. Python开发【第三篇】:文件操作与函数

    内容概要 文件操作 初始函数 函数定义与调用 函数的返回值 函数的参数 函数进阶 函数参数--动态传参 名称空间 作用域 函数的嵌套 函数名的运用 gloabal,nonlocal 关键字 1.文件操 ...

  7. Objective-C:Objective-C:文件中一些对目录进行操作的函数

    IO文件中,一些对目录进行操作的函数:获取.切分.组合 一些对目录进行操作的函数: 获取用户的姓名:(NSString*)NSUserName() ;    --->NSString *Str ...

  8. 继承关系中的拷贝构造函数和赋值操作重载函数分析

    文章目录 1 继承关系中的拷贝构造函数和赋值操作重载函数分析 1 继承关系中的拷贝构造函数和赋值操作重载函数分析 在继承关系中,如果子类未实现拷贝构造函数,那么在子类进行拷贝构造操作时,会直接调用父类 ...

  9. 【推荐】有趣儿的PHP文件操作常用函数总结

    有趣儿的PHP文件操作常用函数总结 以下是个人总结的PHP文件操作函数.当然,这只是部分,还有很多,我没有列出来. 一 .解析路径: 1 获得文件名: basename(); 给出一个包含有指向一个文 ...

最新文章

  1. 我是唯一一个不介意BCH被称为BCH而不是BTC(目前)的人吗?
  2. 爷青回!16年前“打球AI”意外走红,程序员留下了自己的ICQ和MSN
  3. Spring-cloud-eureka-robbin-hystrix-feign
  4. HDU 3896 Greatest TC 双连通分量
  5. Windows坐标系统
  6. windows 端微信多开
  7. 了解DJango模板系统
  8. 2753:走迷宫(dfs+初剪)//可以说是很水了。。。
  9. CUDA + QT Creator + Win7的集成
  10. unity2018关联不到vs_Unity和VS2019下载及配置流程
  11. laravel8 微信小程序(实现简单签到功能)
  12. Mesos-安装和使用
  13. 如何将桌面上的qlv格式转换成mp4视频
  14. OpenGL(十五)——Qt OpenGL三种不同的纹理滤波方式、光照、物体的移动
  15. pwm电机调速的原理介绍与代码实现
  16. SNOI2018 滚粗记
  17. 移动域全链路可观测架构和关键技术
  18. python | 绘制中国地形图(带中国边界省界)
  19. 华为:求生存是当前主线 下阶段重点 to B数字化
  20. 个人总结感想系列 - 2013第一季度总结

热门文章

  1. LeetCode 1784. 检查二进制字符串字段
  2. LeetCode 1235. 规划兼职工作(动态规划+二分查找)
  3. LeetCode MySQL 571. 给定数字的频率查询中位数
  4. LeetCode MySQL 1076. 项目员工II
  5. LeetCode 223. 矩形面积
  6. LeetCode 1295. 统计位数为偶数的数字
  7. LeetCode 22. 括号生成(回溯/DP)
  8. android查询所有照片,Android查询外部存储中所有照片
  9. 冒泡排序和选择排序区别_你以为只是简单的排序?(一)
  10. jqprintsetup已经安装还会提示_Windows 10更新将修复困扰用户已久的循环安装问题...