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

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

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

我该怎么做?


当前回答

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

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

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

其他回答

如果您只针对现代浏览器:

使用element.classList.add添加类:

element.classList.add("my-class");

和element.classList.remove删除类:

element.classList.remove("my-class");

如果您需要支持Internet Explorer 9或更低版本:

在元素的className属性中添加一个空格加上新类的名称。首先,在元素上放置一个id,这样就可以轻松地获得引用。

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

然后

var d = document.getElementById("div1");
d.className += " otherclass";

注意其他类之前的空格。包含空间很重要,否则它会损害类列表中前面的现有类。

另请参见MDN上的element.className。

假设您所做的不仅仅是添加这个类(例如,您还有异步请求等),我建议使用Prototype或jQuery这样的库。

这将使你需要做的所有事情(包括这个)变得非常简单。

假设您现在在页面上有jQuery,您可以使用如下代码向元素添加类名(在本例中是加载时):

$(document).ready( function() {
  $('#div1').addClass( 'some_other_class' );
} );

查看jQueryAPI浏览器以了解其他内容。

document.getElementById('some_id').className+='  someclassname'

OR:

document.getElementById('some_id').classList.add('someclassname')

当第二种方法不起作用时,第一种方法有助于添加类。在第一种方法中,不要忘记在“someclassname”前面留一个空格。

对于删除,您可以使用:

document.getElementById('some_id').classList.remove('someclassname')

您可以使用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');

如果您不想使用jQuery并希望支持较旧的浏览器:

function addClass(elem, clazz) {
    if (!elemHasClass(elem, clazz)) {
        elem.className += " " + clazz;
    }
}

function elemHasClass(elem, clazz) {
    return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}