4 
<body>
    <div id="foo"></div>
    <button onclick ="addClass(el,'Test') ">click</button>
</body>

<script>
    function addClass(element, myClass) {

         element.className = myClass; 
}
    var el = document.getElementById('foo');
</script>

以前のクラスを削除せずに、さらにクラスを追加したいと思います。

4

2 に答える 2

4

CSS クラスは属性内でスペースで区切られているため、次のようになります。

function addClass(element, myClass){
   element.className += ' '+myClass;
}

または、最新のブラウザーの場合は、classListAPIを使用します。

function addClass(element, myClass){
   element.classList.add(myClass);
}

…古いブラウザでもポリフィルできます。

属性を使用しておらず、文字列内の特定のクラスのインスタンスが 1 つだけclassListであることを確認したいclass場合は、最初にそれを削除できます (OCD の場合は完全に不要です)。

var re = new RegExp( "(?:^|\\s)"+myClass+"(?:\\s|$)", 'g' );
el.className = el.className.replace(re, '');
于 2013-05-25T05:26:17.173 に答える