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 函数的执行环境和作用域链的深入解析
Nov 01 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
jquery ajax属性async(同步异步)示例
Nov 05 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
利用Node.js编写跨平台的spawn语句详解
Feb 12 Javascript
用ES6写全屏滚动插件的示例代码
May 02 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 Javascript
Node.js API详解之 readline模块用法详解
May 22 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上的memcache和memcached两个pecl库
2010/03/29 PHP
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
PHP的PDO连接讲解
2019/01/24 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
ExtJs的Date格式字符代码
2010/12/30 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
讲解Python中fileno()方法的使用
2015/05/24 Python
Python获取linux主机ip的简单实现方法
2016/04/18 Python
python学习教程之使用py2exe打包
2017/09/24 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
数字天堂软件测试面试题
2012/12/23 面试题
总经理驾驶员岗位职责
2013/12/04 职场文书
yy婚礼主持词
2014/03/14 职场文书
《将心比心》教学反思
2014/04/08 职场文书
高三毕业寄语
2014/04/10 职场文书
班级文化建设标语
2014/06/23 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
中学生自我评价2015
2015/03/03 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
Python中如何处理常见报错
2022/01/18 Python
MySQL 数据库范式化设计理论
2022/04/22 MySQL