我有一个元素已经有一个类:

<div class="someclass">
    <img ... id="image1" name="image1" />
</div>

现在,我想创建一个JavaScript函数,它将向div添加一个类(不是替换,而是添加)。

我该怎么做?


当前回答

使用纯JavaScript将类添加到元素的另一种方法

对于添加类:

document.getElementById("div1").classList.add("classToBeAdded");

要删除类:

document.getElementById("div1").classList.remove("classToBeRemoved");

其他回答

要向元素添加其他类,请执行以下操作:

要在不删除/影响现有值的情况下将类添加到元素,请附加一个空格和新类名,如下所示:

document.getElementById("MyElement").className += " MyClass";

要更改元素的所有类,请执行以下操作:

要用一个或多个新类替换所有现有类,请设置className属性:

document.getElementById("MyElement").className = "MyClass";

(可以使用空格分隔的列表来应用多个类。)

为了详细说明其他人所说的,多个CSS类组合在一个字符串中,由空格分隔。因此,如果您想对其进行硬编码,它只需如下所示:

<div class="someClass otherClass yetAnotherClass">
      <img ... id="image1" name="image1" />
</div>

从那里,您可以很容易地导出添加新类所需的javascript。。。只需在元素的className属性中添加一个空格,后跟新类。知道了这一点,您还可以编写一个函数,以便以后在需要时删除类。

在YUI中,如果包含yuidom,则可以使用

YAHOO.util.Dom.addClass('div1','className');

HTH

在没有任何框架的情况下,最简单的方法是使用element.classList.add方法。

var element = document.getElementById("div1");
element.classList.add("otherclass");

编辑:如果要从元素中删除类-

element.classList.remove("otherclass");

我宁愿不添加任何空格和重复条目处理(使用document.className方法时需要这样做)。浏览器存在一些限制,但可以使用polyfills解决这些限制。

您可以使用API querySelector来选择元素,然后以元素和新类名作为参数创建函数。在现代浏览器中使用classlist,在IE8中使用else。然后,您可以在事件后调用该函数。

 //select the dom element
 var addClassVar = document.querySelector('.someclass');

 //define the addclass function
 var addClass = function(el,className){
   if (el.classList){
     el.classList.add(className);
   }
   else {
     el.className += ' ' + className;
  }
};

//call the function
addClass(addClassVar, 'newClass');