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. Web开发——HTML基础(图像、音频和视频内容)

    参考: 参考:HTML中的图像 参考:视频和音频内容 目录: 1.HTML中的图像 1.1 我们如何在网页上放置图像? (1)替代文字(alt) (2)宽度和高度 (3)图片标题 1.2 用图形和图形 ...

  2. ext 的controller中的refs的使用方法

    通过ext api 可以知道ext 的controller中有个refs的属性,对于这个属性 文档上是这么说的:配置数组构建页面上的视图的引用. 我并看不懂,接下来说的是我对这个refs的理解. 对这 ...

  3. spring声明式事务管理方式( 基于tx和aop名字空间的xml配置+@Transactional注解)

    1. 声明式事务管理分类 声明式事务管理也有两种常用的方式, 一种是基于tx和aop名字空间的xml配置文件,另一种就是基于@Transactional注解. 显然基于注解的方式更简单易用,更清爽. ...

  4. ORACLE---OCP培训

    闪回恢复区 SYS@orcl>show parameter recov; NAME         TYPE  VALUE------------------------------------ ...

  5. 源码安装Nginx以及用systemctl管理

    一.源码安装Nginx: 先安装gcc编译器(安装过的可以忽略) [root@localhost ~]# yum -y install gcc gcc-c++ wget 进入src目录 [root@l ...

  6. java框架之Spring(5)-注解驱动开发

    准备 1.使用 maven 创建一个 java 项目,依赖如下: <dependency> <groupId>org.springframework</groupId&g ...

  7. [js]js设计模式-修改原型

    参考 操作原型 - 给原型添加属性 - 方法1: Fn.prototype.sum=function{} - 方法2: Fn.prototype={} //constructor指向了Object的原 ...

  8. 小程序 切换到tabBar页面不刷新问题

    小程序跳转的几种方式有wx.navigateTo,wx.redirectTo,wx.reLaunch,wx.switchTab等.下面我们重点研究切换到tabBar的两种方式. wx.switchTa ...

  9. Python Scrapy爬虫速成指南

    序 本文主要内容:以最短的时间写一个最简单的爬虫,可以抓取论坛的帖子标题和帖子内容. 本文受众:没写过爬虫的萌新. 入门 0.准备工作 需要准备的东西: Python.scrapy.一个IDE或者随便 ...

  10. leaflet实用插件整理

    leaflet实用插件整理: https://www.giserdqy.com/webgis/leaflet/4920/leaflet%E5%AE%9E%E7%94%A8%E6%8F%92%E4%BB ...