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 相关文章推荐
jquery tools之tooltip
Jul 25 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
JQuery删除DOM节点的方法
Jun 11 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
ES6之Proxy的get方法详解
Oct 11 Javascript
微信小程序实现同时上传多张图片
Feb 03 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
基于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 学习路线与时间表
2010/02/21 PHP
php获取从html表单传递数组的方法
2015/03/20 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
YII分模块加载路由的实现方法
2018/10/01 PHP
javascript 获取表单file全路径
2009/12/31 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
javascript学习笔记(一)基础知识
2014/09/30 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
Java分治归并排序算法实例详解
2017/12/12 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
python导入pandas具体步骤方法
2019/06/23 Python
opencv python图像梯度实例详解
2020/02/04 Python
keras 权重保存和权重载入方式
2020/05/21 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
医学专业毕业生推荐信
2013/11/14 职场文书
志愿者活动总结范文
2014/04/26 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript