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 组件之旅(二)编码实现和算法
Oct 28 Javascript
javascript 特性检测并非浏览器检测
Jan 15 Javascript
一个JQuery写的点击上下滚动的小例子
Aug 27 Javascript
js事件冒泡实例分享(已测试)
Apr 23 Javascript
动态改变div的z-index属性的简单实例
Aug 08 Javascript
jQuery中:button选择器用法实例
Jan 04 Javascript
js+css实现导航效果实例
Feb 10 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
node.js 如何监视文件变化
Sep 01 Javascript
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 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中的多种加密技术及代码示例解析
2016/10/20 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
PHP 文件上传限制问题
2019/09/01 PHP
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
Python3导入自定义模块的三种方法详解
2018/04/13 Python
python 字符串只保留汉字的方法
2018/11/16 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
python psutil监控进程实例
2019/12/17 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
python request 模块详细介绍
2020/11/10 Python
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
介绍一下Make? 为什么使用make
2016/07/31 面试题
教师的实习自我鉴定
2013/12/17 职场文书
经济贸易系求职信
2014/08/04 职场文书
博士生专家推荐信
2015/03/25 职场文书
晚会开幕词范文
2016/03/04 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
PHP遍历数组的6种方式总结
2021/11/17 PHP
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫
【DOTA2】高能暴走TK秀!PSG LGD vs ASTER - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA