文章出處
文章列表
for DOM
github: https://github.com/laixiangran/commonJS/blob/master/src/forDOM.js
代碼
/**
* Created by laixiangran on 2016/1/24
* homepage：http://www.cnblogs.com/laixiangran/
* for DOM
*/
(function(undefined) {
var com = window.COM = window.COM || {};
com.$D = {
// 根據id查找
byId: function(id, context) {
var ctx = context || document;
return ctx.getElementById(id);
},
// 根據類名查找
byClassName: function(className, context) {
var ctx = context || document;
return ctx.getElementsByClassName(className);
},
// 根據標簽名查找
byTagName: function(tagName, context) {
var ctx = context || document;
return ctx.getElementsByTagName(tagName);
},
// 在文檔中添加樣式
addSheet: function() {
var doc, cssCode;
if (arguments.length == 1) {
doc = document;
cssCode = arguments[0];
}else if (arguments.length == 2) {
doc = arguments[0];
cssCode = arguments[1];
}else {
alert("addSheet函數最多接受兩個參數!");
}
var headElement = doc.getElementsByTagName("head")[0];
var styleElements = headElement.getElementsByTagName("style");
if(styleElements.length == 0){ // 如果不存在style元素則創建
if (!+"\v1") { // ie
doc.createStyleSheet();
}else {
var tempStyleElement = doc.createElement("style"); //w3c
tempStyleElement.setAttribute("type", "text/css");
headElement.appendChild(tempStyleElement);
}
}
var styleElement = styleElements[0];
var media = styleElement.getAttribute("media");
if (media != null && !/screen/.test(media.toLowerCase())) {
styleElement.setAttribute("media", "screen");
}
if (!+"\v1") { // ie
styleElement.styleSheet.cssText += cssCode;
}else if (/a/[-1] == "a") {
styleElement.innerHTML += cssCode; // 火狐支持直接innerHTML添加樣式表字串
}else{
styleElement.appendChild(doc.createTextNode(cssCode))
}
},
/*
* iframe高度自適應
* @param id iframe的id
* @param endTime 計算的時間
* */
adjustIframe: function(id, endTime) {
var iframe = this.byId(id),
time = 0,
end = endTime || 30,
intervalID;
if (iframe) {
function callback() {
time = time + 1;
if (time == end) {
clearInterval(intervalID)
}
var idoc = iframe.contentWindow && iframe.contentWindow.document || iframe.contentDocument;
var iheight = Math.max(idoc.body.scrollHeight, idoc.documentElement.scrollHeight);
iframe.style.height = iheight + "px";
}
intervalID = setInterval(callback, 50)
}
},
/*
* 拖拽元素
* @param elem 拖拽的元素
* @param callback 拖拽結束之后的回調函數
* */
drag: function(elem, callback) {
callback = callback || function() {};
var $D = this;
var params = {
left: 0,
top: 0,
currentX: 0,
currentY: 0,
flag: false
};
if ($D.getStyle(elem, "left") !== "auto") {
params.left = $D.getStyle(elem, "left");
}
if ($D.getStyle(elem, "top") !== "auto") {
params.top = $D.getStyle(elem, "top");
}
elem.onmousedown = function(event) {
params.flag = true;
event = event || window.event;
params.currentX = event.clientX;
params.currentY = event.clientY;
};
document.onmousemove = function(event) {
event = event || window.event;
if (params.flag) {
var nowX = event.clientX,
nowY = event.clientY;
var disX = nowX - params.currentX,
disY = nowY - params.currentY;
elem.style.left = parseInt(params.left) + disX + "px";
elem.style.top = parseInt(params.top) + disY + "px";
}
};
document.onmouseup = function() {
params.flag = false;
if ($D.getStyle(elem, "left") !== "auto") {
params.left = $D.getStyle(elem, "left");
}
if ($D.getStyle(elem, "top") !== "auto") {
params.top = $D.getStyle(elem, "top");
}
callback(elem);
};
},
// 獲取元素被窗口卷去的上部分高度
getScrollTop: function(elem) {
var doc = elem ? elem.ownerDocument : document;
return doc.documentElement.scrollTop || doc.body.scrollTop;
},
// 獲取元素被窗口卷去的左部分寬度
getScrollLeft: function(elem) {
var doc = elem ? elem.ownerDocument : document;
return doc.documentElement.scrollLeft || doc.body.scrollLeft;
},
// 獲取元素的左偏移量
getElementLeft: function(elem) {
var actualLeft = elem.offsetLeft;
var current = elem.offsetParent;
while (current !== null) {
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
},
// 獲取元素的上偏移量
getElementTop: function(elem) {
var actualTop = elem.offsetTop;
var current = elem.offsetParent;
while (current !== null) {
actualTop += current. offsetTop;
current = current.offsetParent;
}
return actualTop;
},
// 獲取元素的范圍（包括窗口不可見的部分）
rect: function(elem) {
var left = 0,
top = 0,
right = 0,
bottom = 0;
if (!elem.getBoundingClientRect) {
left = this.getElementLeft(elem);
top = this.getElementTop(elem);
right = left + elem.offsetWidth;
bottom = top + elem.offsetHeight;
} else {
var rect = elem.getBoundingClientRect();
left = right = this.getScrollLeft(elem);
top = bottom = this.getScrollTop(elem);
left += rect.left;
right += rect.right;
top += rect.top;
bottom += rect.bottom;
}
return {
"left": left,
"top": top,
"right": right,
"bottom": bottom
};
},
// 獲取元素在窗口可見的范圍
clientRect: function(elem) {
var rect = this.rect(elem),
sLeft = this.getScrollLeft(elem),
sTop = this.getScrollTop(elem);
rect.left -= sLeft;
rect.right -= sLeft;
rect.top -= sTop;
rect.bottom -= sTop;
return rect;
},
// 獲取瀏覽器視口大小
getViewport: function() {
if (document.compatMode == "BackCompat") { // 判斷是否運行在混雜模式
return {
"width": document.body.clientWidth,
"height": document.body.clientHeight
};
} else {
return {
"width": document.documentElement.clientWidth,
"height": document.documentElement.clientHeight
};
}
},
/*
* 元素是否包含某元素
* @parma elemA 包含元素
* @param elemB 被包含元素
* */
contains: function(elemA, elemB) {
if (typeof elemA.contains == "function" && (!COM.$B.engine.webkit || COM.$B.engine.webkit >= 522)) {
return elemA.contains(elemB);
} else if (typeof elemA.compareDocumentPosition == "function") {
return !!(elemA.compareDocumentPosition(elemB) & 16);
} else {
var node = elemB.parentNode;
do {
if (node === elemA) {
return true;
} else {
node = node.parentNode;
}
} while (node !== null);
return false;
}
},
// 獲取所有css屬性
curStyle: function(elem) {
if (document.defaultView && typeof document.defaultView.getComputedStyle == "function") {
return document.defaultView.getComputedStyle(elem, null);
} else {
return elem.currentStyle;
}
},
/*
* 獲取元素指定的css屬性的值
* @param elem 當前元素
* @parma name css屬性名
* */
getStyle: function(elem, name) {
var style = null;
if (document.defaultView && typeof document.defaultView.getComputedStyle == "function") {
style = document.defaultView.getComputedStyle(elem, null);
return name in style ? style[name] : style.getPropertyValue(name);
} else {
var curStyle = elem.currentStyle;
style = elem.style;
if (name == "opacity") {
if (/alpha\(opacity=(.*)\)/i.test(curStyle.filter)) {
var opacity = parseFloat(RegExp.$1);
return opacity ? opacity / 100 : 0;
}
return 1;
}
if (name == "float") {
name = "styleFloat";
}
var ret = curStyle[name] || curStyle[com.$S.camelize(name)];
// 單位轉換
if (!/^-?\d+(?:px)?$/i.test(ret) && /^\-?\d/.test(ret)) {
var left = style.left,
rtStyle = elem.runtimeStyle,
rsLeft = rtStyle.left;
rtStyle.left = curStyle.left;
style.left = ret || 0;
ret = style.pixelLeft + "px";
style.left = left;
rtStyle.left = rsLeft;
}
return ret;
}
},
/*
* 設置元素指定的css屬性的值
* @param elem 當前元素
* @parma style css屬性名
* @param value css屬性的指
* */
setStyle: function(elems, style, value) {
if (!elems.length) {
elems = [elems];
}
if (typeof style == "string") {
var s = style;
style = {};
style[s] = value;
}
com.$A.forEach(elems, function(elem) {
for (var name in style) {
if (style.hasOwnProperty(name)) {
var value = style[name];
if (name == "opacity" && com.$B.browser.ie) {
elem.style.filter = (elem.currentStyle && elem.currentStyle.filter || "").replace( /alpha\([^)]*\)/, "" ) + " alpha(opacity=" + (value * 100 | 0) + ")";
} else if (name == "float") {
elem.style[com.$B.browser.ie ? "styleFloat" : "cssFloat" ] = value;
} else {
elem.style[com.$S.camelize(name)] = value;
}
}
}
});
},
// 獲取元素大小
getSize: function(elem) {
var width = elem.offsetWidth,
height = elem.offsetHeight;
if (!width && !height) {
var repair = this.contains(document.body, elem),
parent;
if (!repair) { // 元素不在body上
parent = elem.parentNode;
document.body.insertBefore(elem, document.body.childNodes[0]);
}
var style = elem.style,
cssShow = {
position: "absolute",
visibility: "hidden",
display: "block",
left: "-9999px",
top: "-9999px"
},
cssBack = {
position: style.position,
visibility: style.visibility,
display: style.display,
left: style.left,
top: style.top
};
this.setStyle(elem, cssShow);
width = elem.offsetWidth;
height = elem.offsetHeight;
this.setStyle(elem, cssBack);
if (!repair) {
parent ? parent.appendChild(elem) : document.body.removeChild(elem);
}
}
return {
"width": width,
"height": height
};
}
};
}());參考
文章列表
全站熱搜
留言列表
