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. [math] sagemath

    官网首页:http://www.sagemath.org 首页里引出的两个教程 http://www.gregorybard.com/Sage.html http://sagebook.gforge. ...

  2. 《Mysql 用户管理》

    一:数据库用户 ROOT 和 其他用户有什么区别么? -  Mysql root 和 linux root 不是一回事,数据库 root 只不过是初始化时候自己建立的一个用户而已,随时可以删除/修改. ...

  3. https SSL主流数字证书都有哪些格式(转载)

    主流数字证书都有哪些格式? 一般来说,主流的Web服务软件,通常都基于两种基础密码库:OpenSSL和Java. Tomcat.Weblogic.JBoss等,使用Java提供的密码库.通过Java的 ...

  4. opencart3如何安装模板

    opencart 3模板采用twig模式,安装模板也有点不大一样,随ytkah一起来看看opencart3如何安装模板吧1.下载模板文件,用ftp上传到对应的位置,一般有几个文件夹,比如:admin. ...

  5. ELK基础原理

    搜索引擎 索引组件:  获取数据-->建立文档-->文档分析-->文档索引(倒排索引)    搜索组件:  用户搜索接口-->建立查询(将用户键入的信息转换为可处理的查询对象) ...

  6. 这10个Python项目超有趣!

    前言: Python可谓是现在很多人正在学或者想学的一个脚本语言了,提到学习自然就少不了拿项目练手,可是一般的项目根本提不起兴趣嘛,这10个项目可是非常有趣的,不信你看看. [Python 图片转字符 ...

  7. 十一、无事勿扰,有事通知(2)——KVO

    概述 Key-Value-Observe,简称KVO,和上节介绍的Notification师出同门,主要目的都是为了实现观察者模式. 虽说是同门师兄弟,但是各自精通的技艺却是各不相同的. 不像Noti ...

  8. upload-labs

    upload-labs是一个和sqli-labs类似的靶场平台,只不过是一个专门学习文件上传的.整理的很好,虽然并不能将服务器解析漏洞考虑进去,但毕竟一个靶场不可能多个web容器吧,关键是思路很重要, ...

  9. windows10系统下安装pygame

    1.安装python,选择版本3.7.1 下载地址:https://www.python.org/downloads/windows/选择安装版本 2.安装pip 下载地址:https://pypi. ...

  10. vim代码格式化插件clang-format

    title: vim代码格式化插件clang-format date: 2017-12-12 20:28:26 tags: vim categories: 开发工具 安装vim-clang-forma ...