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 常用关键字列表集合
Dec 04 Javascript
JS原型对象通俗&quot;唱法&quot;
Dec 27 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 Javascript
vue element-ui中table合计指定列求和实例
Nov 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 Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
如何使用PHP计算上一个月的今天
2013/05/23 PHP
php判断是否为json格式的方法
2014/03/04 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
js加解密 脚本解密
2008/02/22 Javascript
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
python字典键值对的添加和遍历方法
2016/09/11 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
Python自动化导出zabbix数据并发邮件脚本
2019/08/16 Python
python输出pdf文档的实例
2020/02/13 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
web字体加载方案优化小结
2019/11/29 HTML / CSS
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
哈理工毕业生的求职信
2013/12/22 职场文书
招商专员岗位职责
2014/02/08 职场文书
大学军训感言600字
2014/02/25 职场文书
法人身份证明书
2014/10/08 职场文书
Java设计模式之代理模式
2022/04/22 Java/Android
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技