使用JavaScript向元素添加CSS类

Adding CSS classes to an element using JavaScript

本文关键字：CSS 添加 元素 JavaScript 使用      更新时间：2023-09-26
<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>

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

工作小提琴演示

试试这个:

function addClass(element, myClass) {
    element.className += ' ' + myClass; 
}
var foo = document.getElementById('foo');
addClass(foo, 'a');
addClass(foo, 'b');

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

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

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

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

…你甚至可以为旧的浏览器填充。

如果您不使用classList，并希望确保您的class属性在字符串中只有一个给定类的实例，您可以首先删除它(完全不必要，但用于OCD):

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