如何通过javascript将一个CSS类添加到一个元素?
假设一个HTML元素的id
是已知的,所以元素可以被引用:
document.getElementById(element_id);
是否存在可用于将CSS类附加到该元素的原生JavaScript函数?
var element = document.getElementById(element_id); element.className += " " + newClassName;
瞧。 这将几乎每一个浏览器的工作。 前导空间很重要,因为className
属性将CSS类视为一个单独的string,它应该与HTML元素上的class
属性(其中多个类必须用空格分隔)匹配。
顺便说一句,你会更好地使用像原型或jQuery的Javascript库,它有方法来做到这一点,以及function,可以首先检查一个元素是否已经有一个类分配。
在原型中,例如:
// Prototype automatically checks that the element doesn't already have the class $(element_id).addClassName(newClassName);
看看有多好?
classList是访问元素的类列表的一种方便的替代方法。请参阅http://developer.mozilla.org/en-US/docs/Web/API/Element.classList 。
IE不支持<10
当一个元素已经定义了一个类名的时候,它对元素的影响就和它在类名string中的位置有关系。 如果发生冲突,以后的课程将覆盖较早的课程。
如果已经存在,那么向类中添加一个类应该将类名称移动到列表的最前端。
document.addClass= function(el, css){ var tem, C= el.className.split(/\s+/), A=[]; while(C.length){ tem= C.shift(); if(tem && tem!= css) A[A.length]= tem; } A[A.length]= css; return el.className= A.join(' '); }
你应该能够设置元素的className属性。 你可以做一个+ =来追加它。
addClass=(selector,classes)=>document.querySelector(selector).classList(...classes.split(' '));
这将添加一个类或MULTIPLE类:
addClass('#myDiv','back-red'); // => Add "back-red" class to <div id="myDiv"/> addClass('#myDiv','fa fa-car') //=>Add two classes to "div"