1.判断class属性

判断一个元素中是否含有指定的class属性值

function hasClass(obj,cn){
//创建正则表达式
var reg=new RegExp("\\b"+cn+"\\b");
return reg.test(obj.className);
}

2.添加class属性

定义一个函数,用来向一个元素中添加指定的class属性值

参数:

obj 要添加class属性的元素

cn 要添加的class值

function addClass(obj,cn){
//检查obj中是否含有cn
if(!hasClass(obj,cn)){
obj.className+=" "+cn
}
}

3.删除class属性

function removeClass(obj,cn){
var reg=new RegExp("\\b"+cn+"\\b");
obj.className=obj.className.replace(reg,"");
}

4.切换class属性

元素中具有该类则删除,没有则添加

function toggleClass(obj,cn){
if(hasClass(obj,cn)){
removeClass(obj,cn)
}else{
addClass(obj,cn)
}
}

通过class改变样式的更多相关文章

  1. web appbuilder 改变样式和添加自定义widget

    一.改变样式 要实现的效果是添加cyan样式 1.将FoldableTheme/style下的cyan copy到TabTheme下的同一目录下: 2.打开TabTheme下的manifest,cop ...

  2. 标签(改变样式style)

    id可以换为class,class对应的名字可以多个一样 <div class="box">box1</div> <div class="b ...

  3. ng-repeat动态改变样式

    当我们使用AngularJs的ng-repeat时候动态绑定数据时,遇到遍历出来的标签样式都一样,这时候希望根据数组的下标分别对应不同的样式 解决:使用$index获取数组下标根据下标改变样式 < ...

  4. 自己定义RatingBar,能依据设置改变样式

    项目在我的GITHUB上  mirsfang的GitHub 一个简单的自己定义View  ,为了一个 比較奇葩的需求而搞出来的.他的功能就是能让你自己设置图片和图片的大小以及星星的数量,是一个组合型的 ...

  5. 微信小程序,动态改变样式

    小程序目前没有修改样式api,但是可以利用数据绑定实现动态改变样式,可以用view标签模拟page然后改变view标签的样式,以下案例演示了如果改变page背景颜色: <view class=& ...

  6. 5.JavaScript改变样式,验证用户输入

    ① x=document.getElementById("demo") //找到元素 x.style.color="#ff0000"; //改变样式 ② if ...

  7. vue点击时动态改变样式 ------- 最简单的方法

    vue点击时动态改变样式 template中 <li :class="{ active:index==isActive }" @click="changeValue ...

  8. vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改

    vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...

  9. javascript和jquery 移除事件 和 改变样式

    javascript移除事件: document.getElementById("word").onmouseover = null; javascript改变样式: docume ...

  10. 使用datasest属性改变样式

    使用datasest属性改变样式 传统做法 对于html中的标签我们可以自定义标签中的属性,例如给input加一个aaa属性 <input type="text" aaa=& ...

随机推荐

  1. 【转载】MDK环境下让STM32用上FreeRTOS v8.1.2和FreeRTOS+Trace v2.6.0全过程

    [转载]https://www.amobbs.com/thread-5601460-1-2.html?_dsign=6a59067b   本人选择使用FreeRTOS的最大原因就是想使用FreeRTO ...

  2. 13.0-uC/OS-III上下文切换

    1.当uC/OS-III转向执行另一个任务的时候,它保存了当前任务的CPU寄存器到堆栈.并从新任务的的堆栈中CPU寄存器载入CPU.这个过程叫做上下文切换. 上下文切换需要一些开支. CPU的寄存器越 ...

  3. gitlab备份、恢复、升级

    1.备份 gitlab的备份很简单,只要使用命令: gitlab-rake gitlab:backup:create 即可将当前的数据库.代码全部备份到/var/opt/gitlab/backups ...

  4. nginx rewrite 指令

    ginx通过ngx_http_rewrite_module模块支持url重写.支持if条件判断,但不支持else. 该模块需要PCRE支持,应在编译nginx时指定PCRE源码目录, nginx安装方 ...

  5. c#中可变参数(params关键字的使用)

    一.params 是C#开发语言中关键字, params主要的用处是在给函数传参数的时候用,就是当函数的参数不固定的时候. 在方法声明中的 params 关键字之后不允许任何其他参数,并且在方法声明中 ...

  6. debug调试命令

  7. Delphi7打开项目提示'one or more lines were too long and has been truncated'

    打开主项目文件直接显示一排'口'形状!查了下资料也问了下伙伴,这多半应该是文件损坏了,解决办法: 1. 不关D7的事,所以重装D7应该是无效的,最好看看自己是不是有备份文件,我之前有备份的所以直接覆盖 ...

  8. keepalived weight正负值问题(实现主服务器nginx故障后迅速切换到备服务器)

    有两台负载均衡,lb01,lb02.  lb02, priority值为100 编辑keepalived配置文件   vim /etc/keepalived/keepalived.conf ! Con ...

  9. org.codehaus.plexus.archiver.jar.Manifest.write(java.io.PrintWriter)

    通过start.spring.io下载maven工程导入eclipse后,出现pom文件错误: org.codehaus.plexus.archiver.jar.Manifest.write(java ...

  10. Maven 的41种骨架功能介绍(转)

    Maven 的41种骨架: ...>mvn archetype:generate 1: internal -> appfuse-basic-jsf (创建一个基于Hibernate,Spr ...