var utils = (function(window) {
var flag = "getComputedStyle" in window;
function win(attr, value) {
if(typeof value !== "undefined") {
document.documentElement[attr] = value;
document.body[attr] = value;
}
return document.documentElement[attr] || document.body[attr];
}
function getCss(curEle, attr) {
var val = null,
reg = null;
if(!flag) {
if(attr === "opacity") {
val = curEle.currentStyle["filter"];
reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i
val = reg.test(val) ? reg.exec(val)[1] / 100 : 1;
} else {
val = curEle.currentStyle[attr];
}
} else {
val = window.getComputedStyle(curEle, null)[attr];
}
reg = /^(-?\d+(\.\d+)?)(px|pt|rem|rm)?$/i;
if(reg.test(val)) {
return parseFloat(val);
} else {
return val;
}
}
function listToArray(likeAry) {
var ary = [];
if(!flag) {
for(var i = 0; i < likeAry.length; i++) {
ary[ary.length] = likeAry[i];
}
} else {
ary = Array.prototype.slice.call(likeAry);
}
return ary;
}
function trim(str) {
return str.replace(/(^ +| +$)/g, "");
}
function jsonParse(str) {
var obj = null;
if(!flag) {
obj = eval("(" + str + ")");
} else {
obj = JSON.parse(str);
}
return obj;
}
function offset(curEle) {
var top = null,
left = null,
par = curEle.offsetParent;
left += curEle.offsetLeft;
top += curEle.offsetTop;
while(par) {
//IE8已经包含边框
if(navigator.userAgent.indexOf("MSIE 8") === -1) {
//累加父级边框
left += par.clientLeft;
top += par.clientTop;
}
//累加父级参照物偏移量
left += par.offsetLeft;
top += par.offsetTop;
par = par.offsetParent;
}
return {
top: top,
left: left
}
}
function children(curEle, tagName) {
var nodeList = curEle.childNodes;
var ary = [];
if(!flag) {
for(var i = 0, len = nodeList.length; i < len; i++) {
var curNode = nodeList[i];
if(curNode.nodeType === 1) {
ary[ary.length] = curNode;
}
nodeList = null;
}
} else {
//类数组转换为数组
ary = Array.prototype.slice.call(curEle.children);
}
//二次筛选
if(typeof tagName === "string") {
for(var j = 0; j < ary.length; j++) {
var curEleNode = ary[j];
if(curEleNode.nodeName.toLowerCase() !== tagName.toLowerCase()) {
ary.splice(j, 1);
j--;
}
}
}
return ary;
}
function prev(curEle) {
if(flag) {
return curEle.previousElementSibling;
}
var pre = curEle.previousSibling;
while(pre && pre.nodeType !== 1) {
pre = pre.previousSibling;
}
return pre;
}
function prevAll(curEle) {
var ary = [];
var pre = this.prev(curEle);
while(pre) {
ary.unshift(pre);
pre = this.prev(pre);
}
return ary;
}
function next(curEle) {
if(flag) {
return curEle.nextElementSibling;
}
var next = curEle.nextSibling;
while(next && next.nodeType !== 1) {
next = next.previousSibling;
}
return next;
}
function nextAll(curEle) {
var ary = [];
var next = this.next(curEle);
while(next) {
ary.push(next);
next = this.next(next);
}
return ary;
}
function sibling(curEle) {
var ary = [];
var pre = this.prev(curEle);
var next = this.next(curEle);
pre ? ary.push(pre) : null;
next ? ary.push(next) : null;
return ary;
}
function siblings(curEle) {
return this.prevAll(curEle).concat(this.nextAll(curEle));
}
function index(curEle) {
return this.prevAll(curEle).length;
}
function firstChild(curEle) {
var children = this.children(curEle);
return children.length > 0 ? children[0] : null;
}
function lastChild(curEle) {
var children = this.children(curEle);
return children.length > 0 ? children[children.length - 1] : null;
}
function append(newEle, container) {
container.appendChild(newEle);
}
function prepend(newEle, container) {
var firstEle = this.firstChild(container);
if(firstEle) {
container.insertBefore(newEle, firstEle);
return;
}
this.append(newEle, container);
}
function insertBefore(newEle, oldEle) {
oldEle.parentNode.insertBefore(newEle, oldEle);
}
function insertAfter(newEle, oldEle) {
var next = this.next(oldEle);
if(next) {
oldEle.parentNode.insertBefore(newEle, next);
return;
}
oldEle.parentNode.appendChild(newEle);
}
function hasClass(curEle, className) {
var reg = new RegExp("(^| +)" + className + "( +|$))");
return reg.test(curEle.className)
}
function addClass(curEle, className) {
//防止传递的多个类名，先拆分成数组
var ary = this.trim(className).split(/ +/g);
for(var i = 0; i < ary.length; i++) {
var curClass = ary[i];
if(!this.hasClass(curEle, curClass)) {
curEle.className += " " + curClass;
}
}
}
function removeClass(curEle, className) {
//防止传递的多个类名，先拆分成数组
var ary = this.trim(className).split(/ +/g);
var reg = new RegExp("(^| +)" + className + "( +|$))", "g");
for(var i = 0; i < ary.length; i++) {
var curClass = ary[i];
if(this.hasClass(curEle, curClass)) {
curEle.className = curEle.className.replace(reg, " ");
}
}
}
function getEleByClass(className, context) {
context = context || document;
if(flag) {
return this.listToArray(context.getElementsByClassName(className));
}
var ary = [];
var classNameAry = this.trim(className).split(/ +/g);
var nodeList = context.getElementsByTagName("*");
for(var i = 0, len = nodeList.length; i < len; i++) {
var curNode = nodeList[i];
var isOk = true;
for(var j = 0; j < classNameAry.length; j++) {
var curName = classNameAry[j];
var reg = new RegExp("(^| +)" + curName + "( +|$)")
if(!reg.test(curNode.className)) {
isOk = false;
break;
}
}
if(isOk) {
ary.push(curNode);
}
}
return ary;
}
function setCss(curEle, attr, value) {
reg = /^(width|height|top|right|bottom|left|(margin|padding)(Top|Right|Bottom|Right|)?)$/;
if(attr === "float") {
curEle.style["cssFloat"] = value;
curEle.style["styleFloat"] = value;
return;
}
if(attr === "opacity") {
curEle.style["opacity"] = value;
curEle.style["filter"] = "alpha(opacity=" + value * 100 + ")";
return;
}
if(reg.test(attr)) {
if(!isNaN(value)) {
curEle.style[attr] = value + "px";
}
}
curEle.style[attr] = value;
}
function setGroupCss(curEle, obj) {
obj = obj || 0;
if(obj.toString() !== "[object Object]") {
return;
}
for(var key in obj) {
if(obj.hasOwnProperty(key)) {
this.setCss(curEle, key, obj[key]);
}
}
}
function css(curEle) {
var arg2 = arguments[1];
if(typeof arg2 === "string") {
var arg3 = arguments[2];
if(typeof arg3 === "undefined") {
return this.getCss.call(curEle, arguments);
}
this.setCss.call(curEle, arguments);
}
arg2 = arg2 || 0;
if(arg2.toString() === "[object Object]") {
this.setGroupCss.apply(this, arguments);
}
}
return {
win: win, //操作浏览器盒子模型
listToArray: listToArray, //类数组转换为数组
trim: trim, //去除字符串首尾空格
jsonParse: jsonParse, //格式化JSON
offset: offset, //获取元素偏移量
children: children, //获取元素所有子节点
prev: prev, //获取哥哥节点
prevAll: prevAll, //获取所有哥哥节点
next: next, //获取弟弟节点
nextAll: nextAll, //获取所有弟弟节点
sibling: sibling, //获取相邻两个节点
siblings: siblings, //获取所有兄弟节点
index: index, //获取当前元素索引
firstChild: firstChild, //获取当前元素第一个子节点
lastChild: lastChild, //获取当前元素最后一个子节点
append: append, //向当前元素末尾追加一个元素
prepend: prepend, //向当前元素之前追加一个元素
insertBefore: insertBefore, //把当前元素追加指定元素之前
insertAfter: insertAfter, //把当前元素追加指定元素之后
hasClass: hasClass, //判断元素是否有某个类名
addClass: addClass, //给元素增加样式
removeClass: removeClass, //删除元素样式
getEleByClass: getEleByClass, //通过类名获取元素
getCss: getCss, //获取元素样式
setCss: setCss, //设置元素样式
css: css //获取设置css
}
})(window)
封装了大多数常用的dom操作，页面引入即可使用，不依赖任何库，纯原生js，欢迎留言提交BUG，与我联系。