js添加样式class

最近在看js,好好打基础才是王道,底层的东西不容忽视。
Js添加样式名,在用jQuery的时候很容易的一个add和remove就能解决的问题,但是用js该怎么样处理呢,刚看了一篇文章,菜鸟级的《JavaScript初学者应注意的七个细节》,原文地址
http://developer.51cto.com/art/201101/242546_2.htm 里面有一段就写了这样一个东西:修改样式名,我稍微做了下扩展。

一、

function addclass(elm,newclass){
  var c = elm.className;
  if(c!="")
  elm.className=newclass;
}

写个函数然后传入对象元素跟样式名字,判定是否为空,如果不为空就赋值样式名字;

二、

function addclass(elm,newclass){
  var c = elm.className;
  elm.className = (c =="") ? newclass : c+' '+newclass;
}

写个函数然后传入对象元素跟需要添加到样式名字,判定是否为空,如果为空就赋值,否则就加个空格再赋值;

三、

function addclass(elm,newclass){ 
  var classes = elm.className.split(' '); 
  classes.push(newclass); 
  elm.className = classes.join(' '); 
}

传入对象元素跟样式名字,然后把elm.className看成用“ ”(空格)分割的字符串,用split去除空格变成数组,然后用push方法添加样式到数组中,用join添加空格变成字符串再赋值给元素的class,很独特很棒的方法。

然而,我觉得有点不足,假如元素本来就有newclass这类名,那怎么办?就像这样:

然后我想添加个div2类给这个div,如果用第三种方法,虽然不会出错,但页面显示会变成这样
,于是我用第四种方法: **四、**
function zhen(obj,claName){
  var cla=obj.className.split(" ");
  for(var i=0;i<cla.length;i++)
  {
    if(cla[i]==claName)
    return;
  }
  cla.push(claName);
  obj.className=cla.join(" ");
}

继承第三种方法的优势,在其基础上做了个循环判定,保证没有重复的名字存在。

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值