本文整理了四个原生JavaScript常用工具函数，涵盖事件监听添加、元素样式批量设置、获取指定类名元素以及删除CSS类名。代码兼容旧版IE浏览器，通过apply方法处理this指向，利用cssText简化样式赋值，并提供正则匹配类名的高效实现，适合前端开发日常使用。
添加事件监听
一、添加事件监听
具体实现代码如下：
addHandler: function(node, type, fn) { if (node.addEventListener) {
node.addEventListener(type, fn, false); // 第三个参数为false，表示采用冒泡模式
}
} else {
node.attachEvent('on' + type, function() {
fn.apply(node, arguments); // 在attachEvent方法中，this不指向node，因此需使用apply()改变上下文
});
}
}设置元素样式
二、设置元素样式
具体实现代码如下：
setCss: function(node, val) { // val格式如：{'top':'2px','font-size':'12px'}
for (var v in val) {
node.style.cssText += ';' + v + ':' + val[v]; // 使用cssText可同时设置多个属性，且无需判断cssFloat或styleFloat
}
}获取CSS类名元素
三、获取带有指定CSS类名的元素
具体实现代码如下：
// parent参数为可选，用于限定搜索范围
getByClassName: function(className, parent) {
var elem = [],
node = (parent != undefined && parent.nodeType == 1) ? parent.getElementsByTagName('*') : document.getElementsByTagName('*'),
p = new RegExp('(^|\\s)' + className + '(\\s|$)');
for (var n = 0, i = node.length; n < i; n++) {
if (p.test(node[n].className)) {
elem.push(node[n]);
}
}
return elem;
}删除CSS类名
四、删除CSS类名
具体实现代码如下：
removeClassName: function(node, className) {
var par = new RegExp(className, 'g');
node.className = node.className.replace(par, '');
}以上四个函数是本人整理的非常实用且高频使用的原生JavaScript工具函数，分享给各位开发者，希望能对大家有所帮助。