javascript - 如何将类添加到给定的元素？(How do I add a class to a given element?)

Question

I have an element that already has a class:

(我有一个已经有一个类的元素：)

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

Now I want to create a JavaScript function that will add a class to the div (not replace, but add).

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

How can I do that?

(我怎样才能做到这一点？)

  ask by Blankman translate from so

Answer 1

Add a space plus the name of your new class to the className property of the element.

(在元素的className属性中添加一个空格以及新类的名称。)

First, put an id on the element so you can easily get a reference.

(首先，在元素上放置一个id ，以便您可以轻松获得引用。)

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

Then

(然后)

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

Note the space before otherclass .

(注意otherclass之前的otherclass 。)

It's important to include the space otherwise it compromises existing classes that come before it in the class list.

(重要的是要包含空格，否则会损害类列表中之前的现有类。)

See also element.className on MDN .

(另请参见MDN上的element.className 。)