在看了《精通javascript 》一书中,里面讲了很多工具函数,先整理一部分。
主要在javascript和css交互的代码:
function text(e) {
//获取元素文本内容
var t = "";
e = e.childNodes || e;
for (var i = 0, count = e.length; i < count; i++) {
t += e[i].nodeType != 1 ? e[i].nodeValue : text(e[i].childNodes);
}
return t;
}
function attr(elem, name, value) {
//获取或设置元素属性值
if (!name || name.constructor != String) return "";
name = { "for": "htmlFor", "class": "className"}[name] || name;
if (typeof value != "undefined") {
elem[name] = value;
if (elem.setAttribute) {
elem.setAttribute(value);
}
}
return elem[name] || elem.getAttribute(name) || "";
}
function stopDefault(e) {
//防止默认浏览器行为
if (e && e.preventDefault) {
e.preventDefault();
}
else {
window.event.returnValue = false;
}
return false;
}
function stopBubble(e) {
//阻止事件冒泡
if (e && e.stopPropagation) {
e.stopPropagation();
}
else {
window.event.cancelBubble = true;
}
}
//调用示例<a href="#" οnclick=" alert('ok'); stopBubble(event);">demo</a>
function pageX(elem) {
//获取元素的水平位置
return elem.offsetParent ? elem.offsetLeft + pageX(elem.offsetParent) : elem.offsetLeft;
}
function pageY(elem) {
//获取元素的垂直位置
return elem.offsetParent ? elem.offsetTop + pageY(elem.offsetParent) : elem.offsetTop;
}
function parentX(elem) {
//获取元素相对于父亲的水平位置
return elem.parentNode == elem.offsetParent ? elem.offsetLeft : pageX(elem) - pageX(elem.parentNode);
}
function parentY(elem) {
//获取元素相对于父亲的垂直位置
return elem.parentNode == elem.offsetParent ? elem.offsetTop : pageY(elem) - pageY(elem.parentNode);
}
function resetCss(elem, prop) {
//设置css一组属性,它可以恢复到原有的设置
var old = {};
for (var i in prop) {
old[i] = elem.style[i];
elem.style[i] = prop[i];
}
return old;
}
function restoreCss(elem, prop) {
for (var i in prop) {
elem.style[i] = prop[i];
}
}
function getStyle(elem, styleName) {
if (elem.style[styleName]) {//内联样式
return elem.style[styleName];
}
else if (elem.currentStyle) {//IE
return elem.currentStyle[styleName];
}
else if (document.defaultView && document.defaultView.getComputedStyle) {//DOM
styleName = styleName.replace(/([A-Z])/g, '-$1').toLowerCase();
var s = document.defaultView.getComputedStyle(elem, '');
return s && s.getPropertyValue(styleName);
}
else {//other,for example, Safari
return null;
}
}
function fullHeight(elem) {
//查找元素可能的高度
//如果元素显示那么使用offsetHeight就可以得到高度,如果没有offsetHeight,则使用getHeight()
if (getStyle(elem, "display") != "none") {
return elem.offsetHeight ;
}
var oldcss = resetCss(elem, { display: "", visibility: "hidden", position: "absolute" });
var height = elem.clientHeight ;
restoreCss(elem, oldcss);
return height;
}
function fullWidth(elem) {
//查找元素可能的高度
//如果元素显示那么使用offsetWidth就可以得到高度,如果没有offsetWidth,则使用getWidth()
if (getStyle(elem, "display") != "none") {
return elem.offsetWidth ;
}
var oldcss = resetCss(elem, { display: "", visibility: "hidden", position: "absolute" });
var width = elem.clientWidth ;
restoreCss(elem, oldcss);
return width;
}
function setOpacity(elem, level) {
//这是元素透明度
if (elem.filiters) {
elem.style.filters = "alpha(opacity='" + level + "')";
}
else {
elem.style.opacity = level / 100;
}
}
function cursorX(e) {
//获取光标水平位置
e = e || window.event;
//先检查非IE浏览器位置再检查IE位置
return e.pageX || e.clientX + document.body.scrollLeft;
}
function cursorY(e) {
//获取光标垂直位置
e = e || window.event;
return e.pageY || e.clientY+ document.body.scrollTop;
}
function scrollX() {
//确定浏览器水平滚动条位置
var de = document.documentElement;
return self.pageXOffset || (de && de.scrollLeft) || document.body. scrollLeft;
}
function scrollY() {
//确定浏览器垂直滚动条位置
var de = document.documentElement;
return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
}
function windowHeight() {
//获取视窗的高度
var de = document.documentElement;
return self.innerHeight || (de || de.clientHeight) || document.body.clientHeight;
}
function windowWidth() {
//获取视窗的高度
var de = document.documentElement;
return self.innerWidth || (de || de.clientWidth) || document.body.clientWidth;
}
有关类的继承请参照http://blog.csdn.net/dz45693/article/details/7683195
有关事件添加和移除请参照http://blog.csdn.net/dz45693/article/details/7622262