哇，奇怪这里有这么多过分的答案。。。

<div class="firstClass" onclick="this.className='secondClass'">

使用纯JavaScript代码：

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

function replaceClass(ele, oldClass, newClass){
    if(hasClass(ele, oldClass)){
        removeClass(ele, oldClass);
        addClass(ele, newClass);
    }
    return;
}

function toggleClass(ele, cls1, cls2){
    if(hasClass(ele, cls1)){
        replaceClass(ele, cls1, cls2);
    }else if(hasClass(ele, cls2)){
        replaceClass(ele, cls2, cls1);
    }else{
        addClass(ele, cls1);
    }
}

对于jQuery这样的库，这是最简单的：

<input type="button" onClick="javascript:test_byid();" value="id='second'" />

<script>
function test_byid()
{
    $("#second").toggleClass("highlight");
}
</script>

你也可以这样做：

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

要切换类（如果存在则删除，否则添加）：

document.getElementById('id').classList.toggle('class');

哇，奇怪这里有这么多过分的答案。。。

<div class="firstClass" onclick="this.className='secondClass'">

无意冒犯，但动态更改类是不清楚的，因为它迫使CSS解释器重新计算整个网页的视觉呈现。

原因是CSS解释器几乎不可能知道是否可以更改任何继承或级联，因此简单的答案是：

永远不要动态更改className！-）

但通常只需要更改一两个属性，这很容易实现：

function highlight(elm){
    elm.style.backgroundColor ="#345";
    elm.style.color = "#fff";
}