js添加样式class

来源：互联网发布：键盘改键软件编辑：程序博客网时间：2024/06/02 07:12

最近在看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(" ");}

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

0 0