JavaScript中关于class的调用方法


Posted in Javascript onNovember 28, 2017

PS:class的调用,其实是可以叠加的,当然了这要求样式不同的情况下,如果样式相同,则后一个样式会覆盖前一个样式。

1、举例如下:

<div id="test" class="aaa bbb">测试关于class的调用</div>
.aaa{
 font-size:20px;
 color:red; 
}
.bbb{
 font-size:50px;
 color:green;
}
var test=document.getElementById('test');
test.className='aaa';
test.className='aaa bbb';//因为aaa和bbb的样式相同,所以,bbb的样式会覆盖aaa的样式

所以最后‘测试关于class的调用'几个字的样式是:font-size:50px; color:green;

2、这样的添加类方式很繁琐,每次添加一个新的,我还要带上之前写的类,容易带漏,并且还要检查是否带全,所以可以编写函数方法来解决添加类和删除类的问题:

function hasClass(element,className){   //判断是否存在类
    return element.className.match(new RegExp('(\\s|^)'+className+'(\s|$)'));
 
}
//添加一个Class
function addClass(element,className){
  if(!hasClass(element,className)){
     element.className+=' '+className;
  }  
}  
//删除一个Class
function removeClass(element,className){
 if(hasClass(element,className)){
    element.className=element.className.replace
   (new RegExp('(\\s|^)'+className+'(\s|$)'),' ');
 }
}

以上这篇JavaScript中关于class的调用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js的表单操作 简单计算器
Dec 29 Javascript
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
JQuery中层次选择器用法实例详解
May 18 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
基于JS脚本语言的基础语法详解
Jul 22 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
vue总线机制(bus)知识点详解
May 10 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 #Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 #Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 #Javascript
Dropify.js图片宽高自适应的方法
Nov 27 #Javascript
jfinal与bootstrap的登出实战详解
Nov 27 #Javascript
JQuery 又谈ajax局部刷新
Nov 27 #jQuery
Bootstrap实现翻页效果
Nov 27 #Javascript
You might like
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
javascript正则表达式总结
2016/02/29 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
JS模拟实现ECMAScript5新增的数组方法
2017/03/20 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
研究生自荐信
2013/10/09 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
爱之链教学反思
2014/04/30 职场文书
工地安全质量标语
2014/06/07 职场文书
师范毕业生求职信
2014/07/11 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
上诉状格式
2015/05/23 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript
Nginx 常用配置
2022/05/15 Servers