javaScript给元素添加多个class
<html>
<head>
<style type="text/css">
.div2{
font-size:16px;
color:orange;
}
.div3{
font-size:20px;
color:blue;
}
<style>
<script type="text/javascript">
[1]直接把样式赋值给className
var odiv=document.getElementById('div1');
odiv.className= div3
//这样我们会得到 class ="div3" 会直接把div2样式给覆盖掉;
[2]使用累加赋值给className
var odiv=document.getElementById('div1');
odiv.className+=" "+div3 //样式和样式之间需要空隙 ，所以加个空字符串隔开
//这样可以得到 class="div2 div3" 可以正常增加，但是我们在添加样式的时候我们得考虑下他本身之前有没有同名的样式，如果有我们添加的话就会变成累赘 比如class="div2 div3 div3";
[3]检测样式原先之前是否有相同的样式
var odiv=document.getElementById('div1');
function hasClass(element,csName){
element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正则检测是否有相同的样式
}
[4]在[3]的基础上我们就可以进行判断性给元素添加样式了
var odiv=document.getElementById('div1');
function hasClass(element,csName){
return element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正则检测是否有相同的样式
}
function addClass(element,csName){
if(!hasClass(element,csName)){
element.className+=' '+csName;
}
addClass(odiv,'div3');
//这样就可以灵活给元素添加样式了;
【元素删除指定样式】
//同样先进行判断，在进行删除
var odiv=document.getElementById('div1');
function hasClass(element,csName){
return element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正则检测是否有相同的样式
}
function deleteClass(element,csName){
if(!hasClass(element,csName)){
element.className.replace(RegExp('(\\s|^)'+csName+'(\\s|$)'),' '); //利用正则捕获到要删除的样式的名称，然后把他替换成一个空白字符串，就相当于删除了
}
deleteClass(odiv,div3);
}
</script>
</head>
<body>
<div id="div1" class='div2'> 测试</div>
</body>
</html>
javaScript给元素添加多个class的更多相关文章
- Javascript为元素添加事件处理函数
document.getElementById("test").onclick = function(){ ... };
- Canvas 内部元素添加事件处理
目录 前言 自定义事件 有序数组 元素父类 事件判断 其他 立即执行函数 apply, call, bind addEventListener 传参 调用父类的构造函数 对象检测 isPointInP ...
- 【HTML5】Canvas 内部元素添加事件处理
前言 canvas 没有提供为其内部元素添加事件监听的方法,因此如果要使 canvas 内的元素能够响应事件,需要自己动手实现.实现方法也很简单,首先获得鼠标在 canvas 上的坐标,计算当前坐标在 ...
- JQuery_给元素添加或删除类等以及CSS()方法
一.addClass() - 向被选元素添加一个或多个类 <script src="jquery-1.11.1.min.js"></script> < ...
- 详细解析 JavaScript 获取元素的坐标
引言 最近突然看到了有关图片懒加载的问题,大致意思就是初始状态下页面只加载浏览器可视区域的图片,剩余图片在当浏览器可视区域滚动到其位置时才开始加载.貌似现在许多大型网站都有实现懒加载,所以我便就此问题 ...
- 给HTML页面指定元素添加属性，添加父元素
给HTML页面指定元素添加属性,添加父元素 下面拿一个给富文本中所有的图片增加layer弹窗效果. 思路: 给富文本父元素设置属性. 获取父元素里所有的img 此处用到querySelectorA ...
- JavaScript实现元素拖动性能优化
前言:前几天没事干写了个小网站,打算用原生的javascript实现元素的拖动,但是事情并没有想象的那么顺利,首先是实现了拖动的元素卡的不能再卡,简直不能够,上图~~ 看见没?这就是效果,简直让人欲哭 ...
- js中怎么为同级元素添加点击事件
事件件是javascript脚本语言的重要组成部分,因为有事件才使用户页面的体验更加的美好.元素添加事件是js语言中最基础的.我们可以为元素本身添加事件,也可以通过事件绑定和事件监听为元素的父元素和子 ...
- select元素添加option的add()方法 | try{}catch{}
1.javascript中的select元素添加option使用add()方法 select的add方法,第一个参数是需要被添加的option元素,第二个参数决定了被添加的位置 普通浏览器中,第二个参 ...
随机推荐
- cocoa pods 安装 转载
1.打开终端 终端输入 $ruby -v 查看ruby的版本 打印代码: ruby 2.0.0p648 (2015-12-16 revision 53162) [universal.x86_64- ...
- C# 如何获取错误所在行数
两种方法,一种是利用error.StackTrace,另外一种是try-catch找到错误行数,具体如下: 一.error.StackTrace代码 int i = ex.StackTrace.Ind ...
- SATA接口硬盘加密器
加密卡置于主板与硬盘.光驱之间,透明实时地对写入数据进行加密,对读出数据进行解密,有效防止信息被窃.未经授权的阅读和修改,以及硬盘.光盘丢失.被盗.废弃.非法用户访问而引发的敏感信息泄密问题,为用户打 ...
- adb安装和卸载apk的方式
昨天在使用adb卸载程序,结果死活卸载不了.我输入的命令和系统提示如下: D:\testApk>adb uninstall HelloWorld Failure 后来发现原来卸载程序时,只adb ...
- ORA-942 SP2-0611
环境:oracle 11.2.04 问题描述: 在使用hr用户启用set autot trace时报错 set">HR@test>set autot trace; Error O ...
- 移动端常见的不同苹果手机media query汇总
在做手机网站的时候,我经常用百分比布局,但是经常在不同的手机显示的不同 比如说,一样的东西,在iphone4(s).5(s).6.plus中都会有不同显示 有时候也想有为了某个手机单独的做一些效果,来 ...
- attachEvent和addEventListener
attachEvent和addEventListener在前端开发过程中经常性的使用,他们都可以用来绑定脚本事件,取代在html中写obj.onclick=method. 相同点: 它们都是dom对象 ...
- php 实时推送代码
网站质量不错的网站可以在百度站长平台/数据提交/sitemap栏目下看到实时推送的功能, 目前这个工具是邀请开放, 百度的实时推送的api接口可以实时推送我们新发布的文章, 保证百度在第一时间收录. ...
- python学习（二）
这几天脑子里一直在想一个应用,想以此来练习python.用一句话来概括这个应用的功能,大致表述是这样:自动采集全省各类公共文化机构网站上新发布的信息,并分类呈现.各类公共文化机构,是指公共图书馆.文化 ...
- Python一路走来 Python算法
冒泡排序: 1,2位置左右比较.大的排右边,继续比较2,3 ...... list=[5,7,2,8,12,1] #print(len(list)) for j in range(len(list)) ...