使用JavaScript向元素添加CSS类

Question

使用JavaScript向元素添加CSS类

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>

我希望能够添加更多的类别，而不会删除之前的类别。

- Richard Bustos

2个回答

4

这里是一个可运行的FIDDLE演示

试一试：

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

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

- user1823761

好的，+1 给你那个带有甜美键盘演示风格的样式 :) 我完全要抄袭它 :) - Phrogz

@Phrogz 这是你的... :)。 - user1823761

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Phrogz · Accepted Answer

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

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

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

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

你甚至可以为旧浏览器提供polyfill。

如果你没有使用classList，并且希望确保你的class属性在字符串中只有一个给定类的实例，则可以先将其删除（完全没有必要，但是为了强迫症）：

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