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 相关文章推荐
为调试JavaScript添加输出窗口的代码
Feb 07 Javascript
jquery 新手学习常见问题解决方法
Apr 18 Javascript
为指定的元素添加遮罩层的示例代码
Jan 15 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
jQuery同步提交示例代码
Dec 12 Javascript
利用yarn实现一个webpack+react种子
Oct 25 Javascript
layui导航栏实现代码
May 19 Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 Javascript
手淘flexible.js框架使用和源代码讲解小结
Oct 15 Javascript
小程序实现页面顶部选项卡效果
Nov 06 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 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
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
php递归获取目录内文件(包含子目录)封装类分享
2013/12/25 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
YII框架模块化处理操作示例
2019/04/26 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
php判断目录存在的简单方法
2019/09/26 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
js计算页面刷新的次数
2009/07/20 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
2018/09/27 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
PyQt5响应回车事件的方法
2019/06/25 Python
django-filter和普通查询的例子
2019/08/12 Python
Python类继承和多态原理解析
2020/02/05 Python
python上selenium的弹框操作实现
2020/07/13 Python
设计师珠宝:Ylang 23
2018/05/11 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
2016年优秀团支部事迹材料
2016/02/26 职场文书
python xlwt模块的使用解析
2021/04/13 Python
Python基于百度API识别并提取图片中文字
2021/06/27 Python
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技