javascript - how to assign a class to a span in Javascript?

Question

I have the following HTML:

<span class="edit" contenteditable="true">Some text goes here</span>

This span is editable so I can write in it in the browser.Now my question is, when I press the enter key while the cursor is inside this span,the class of this span should be changed from edit to add.Because there is some css for both of these classes. I know it can be done in jquery by using addClass.toggleClass etc. But I need this to be done in pure javascript as I am using it in TinyMCE editor.

So can anyone help me how it can be done in javascript?

Answer 1

向标签添加一些 id，然后您可以修改该classNameDOM 对象的字段。

document.getElementById("mySpan").className = "add";

和 HTML

<span id="mySpan" class="edit" contenteditable="true">Some text goes here</span>

Answer 2

document.querySelector('span.edit').className = "add"

是另一种方式。

Answer 3

简单地：

html:

<span id="myspan" class="edit" contenteditable="true" onkeypress="changeClass(event)">Some text goes here</span>

js：

function changeClass(event){
 if (e.keyCode == 13) {
document.getElementById("myspan").className="add"
}
}