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 相关文章推荐
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
Bootstrap在线电子商务网站实战项目5
Oct 14 Javascript
JS 实现随机验证码功能
Feb 15 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
Jun 21 Javascript
基于JS实现table导出Excel并保留样式
May 19 Javascript
微信小程序实现列表左右滑动
Nov 19 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
Nov 19 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
建立文件交换功能的脚本(一)
2006/10/09 PHP
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
浅析51个PHP处理字符串的函数
2013/08/02 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
js获取内联样式的方法
2015/01/27 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
Vue中使用Sortable的示例代码
2018/04/07 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
简单的Python抓taobao图片爬虫
2014/10/26 Python
Python 的内置字符串方法小结
2016/03/15 Python
Python基础学习之常见的内建函数整理
2017/09/06 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
运动会班级口号
2014/06/09 职场文书
天堂的孩子观后感
2015/06/11 职场文书