Question

在jQuery中你可以这样做：

$('#myElement').addClass('header');

我怎样才能在纯粹的javascript中使用它？

var elem = document.getElementById('myElement');
elem.addClass('header');

所以我想创建一个小的自定义库，在函数之前使用选择器而不是：

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

这样称呼：

var elem = document.getElementById('myElement');
addClass(elem, 'header');

这是可能的，如果是这样的话，我可以这样做吗？

Answer 1

在HTML5浏览器中，您可以这样做：

elem.classList.add('header');

我强烈建议尽可能使用现代标准编码，use a shim根据需要支持旧版浏览器。最终，你将能够淘汰垫片，并且你不会因为旧的浏览器而导致一堆粗糙的低效旧代码，而这些代码只是以这种方式编写的。

Answer 2

您可以编写自己的addClass方法，例如：

function addClass(element, classname){
    var currentClassList = (element.className || '').split(/\s+/);
    currentClassList
     .push(currentClassList.indexOf(classname) > -1 ? '' : classname);
    element.className = currentClassList.join(' ').trim();
}

这是使用此功能的jsfiddle演示

/*Note*/可以找到Array.indexOf的填充here /*Note 2*/可以找到String.trim的填充here

纯javascript中的selector.addClass（＆＃39; classname＆＃39;）

2 个答案: