通过class改变样式
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改变样式的更多相关文章
- web appbuilder 改变样式和添加自定义widget
一.改变样式 要实现的效果是添加cyan样式 1.将FoldableTheme/style下的cyan copy到TabTheme下的同一目录下: 2.打开TabTheme下的manifest,cop ...
- 标签(改变样式style)
id可以换为class,class对应的名字可以多个一样 <div class="box">box1</div> <div class="b ...
- ng-repeat动态改变样式
当我们使用AngularJs的ng-repeat时候动态绑定数据时,遇到遍历出来的标签样式都一样,这时候希望根据数组的下标分别对应不同的样式 解决:使用$index获取数组下标根据下标改变样式 < ...
- 自己定义RatingBar,能依据设置改变样式
项目在我的GITHUB上 mirsfang的GitHub 一个简单的自己定义View ,为了一个 比較奇葩的需求而搞出来的.他的功能就是能让你自己设置图片和图片的大小以及星星的数量,是一个组合型的 ...
- 微信小程序,动态改变样式
小程序目前没有修改样式api,但是可以利用数据绑定实现动态改变样式,可以用view标签模拟page然后改变view标签的样式,以下案例演示了如果改变page背景颜色: <view class=& ...
- 5.JavaScript改变样式,验证用户输入
① x=document.getElementById("demo") //找到元素 x.style.color="#ff0000"; //改变样式 ② if ...
- vue点击时动态改变样式 ------- 最简单的方法
vue点击时动态改变样式 template中 <li :class="{ active:index==isActive }" @click="changeValue ...
- vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改
vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...
- javascript和jquery 移除事件 和 改变样式
javascript移除事件: document.getElementById("word").onmouseover = null; javascript改变样式: docume ...
- 使用datasest属性改变样式
使用datasest属性改变样式 传统做法 对于html中的标签我们可以自定义标签中的属性,例如给input加一个aaa属性 <input type="text" aaa=& ...
随机推荐
- 配置DNS Server容易忽略的问题
1.named服务启动成功,但nslookup解析报错: [root@xiamihost3 named]# service named restart 停止 named: [确定] 启动 named: ...
- Centos7+python3.6+face-recognition
Step1 安装Python3.6.xhttps://www.digitalocean.com/community/tutorials/how-to-install-python-3-and-set- ...
- axios实现拦截器
项目中通常使用token进行用户权限认证,需要在请求的header中添加token信息进行验证,拦截返回的状态码进行跳转或重新登陆,在全局配置这些不妥,所以新建一个axios实例进行项目的配置. // ...
- java框架之SpringCloud(1)-微服务及SpringCloud介绍
微服务概述 是什么 业界大牛 Martin Fowler 这样描述微服务: 参考[微服务(Microservices)-微服务原作者Martin Flower博客翻译]. 下面是关于上述博客中的部分重 ...
- [sql]sql的select字符串切割
可以经常看看 mysql的refman,写的很棒 sql基础操作 查看表结构 show create table desc table show full columns from test1; li ...
- 2018-2019-1 20189203《Linux内核原理与分析》第二周作业
一.本周学习情况 我本周结合<庖丁解牛>教材学习了蓝墨云的视频课,主要学习内容如下: 1.学习了计算机的工作原理,深入理解了冯诺依曼体系结构. 2.学习了X86-32 CPU的寄存器 3. ...
- test6
- 台式电脑、笔记本快捷选择启动项Boot 快捷键大全
我们在安装系统时,会去设置电脑是从硬盘启动.U盘启动.光驱启动.网卡启动. 一般设置的方法有两种:一种是进BIOS主板菜单设置启动项顺序:另一种就是我在这里要介绍的快捷选择启动项. 以下是网友整理的各 ...
- Java-HttpURLConnection详细说明与实例
URLConnection 类是一个抽象类,代表应用程序和URL之间的通信连接,此类的实例可用于读取和写入此URL引用的资源.URLConnection 允许使用GET,POST或者其他HTTP方法请 ...
- 构建高性能的MYSQL数据库系统-主从复制
实验环境: DB1:172.16.1.100 DB2:172.16.1.101 VRRIP:172.16.1.99 步骤: yum -y install mysql 1.修改DB1的mysql配置文件 ...