Question

<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>

我想添加更多的类，而不删除前一个类。

Answer 1

CSS类在属性中以空格分隔，因此：

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

或者，对于现代浏览器，请使用classList API：

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

......你甚至可以polyfill for older browsers。

如果您没有使用classList并且想要确保您的class属性在字符串中只有一个给定类的实例，则可以先将其删除（完全不必要但是对于OCD）：

var re = new RegExp( "(?:^|\\s)"+myClass+"(?:\\s|$)", 'g' );
el.className = el.className.replace(re, '');

Answer 2

Working FIDDLE Demo 的

试试这个：

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

var foo = document.getElementById('foo');
addClass(foo, 'a');
addClass(foo, 'b');

使用JavaScript将CSS类添加到元素中

2 个答案: