《Pro JavaScript Techniques》中的一些函数

//获取元素的样式值。
function getStyle(elem, name) { if (elem.style[name]) { return elem.style[name]; } else if (elem.currentStyle) { return elem.currentStyle[name]; } else if (document.defaultView && document.defaultView.getComputedStyle) { name = name.replace(/([A-Z])/g, "-$1"); name = name.toLowerCase(); var s = document.defaultView.getComputedStyle(elem, ""); return s && s.getPropertyValue(name); } else { return null } } //获取元素相对于这个页面的x和y坐标。 
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; } //获取元素相对于父元素的x和y坐标。 
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); } //获取使用css定位的元素的x和y坐标。
function posX(elem) { return parseInt(getStyle(elem, "left")); } function posY(elem) { return parseInt(getStyle(elem, "top")); } //设置元素位置。 
function setX(elem, pos) { elem.style.left = pos + "px"; } function setY(elem, pos) { elem.style.top = pos + "px"; } //增加元素X和y坐标。 
function addX(elem, pos) { set(elem, (posX(elem) + pos)); } function addY(elem, pos) { set(elem, (posY(elem) + pos)); } //获取元素使用css控制大小的高度和宽度 
function getHeight(elem) { return parseInt(getStyle(elem, "height")); } function getWidth(elem) { return parseInt(getStyle(elem, "width")); } //获取元素可能,完整的高度和宽度
function getFullHeight(elem) { if (getStyle(elem, "display") != "none") { return getHeight(elem) || elem.offsetHeight; } else { var old = resetCss(elem, { display: "block", visibility: "hidden", position: "absolute" }); var h = elem.clientHeight || getHeight(elem); restoreCss(elem, old); return h; } } function getFullWidth(elem) { if (getStyle(elem, "display") != "none") { return getWidth(elem) || elem.offsetWidth; } else { var old = resetCss(elem, { display: "block", visibility: "hidden", position: "absolute" }); var w = elem.clientWidth || getWidth(elem); restoreCss(elem, old); return w; } } //设置css,并保存旧的css
function resetCss(elem, prop) { 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 show(elem) { elem.style.display = elem.$oldDisplay || " "; } function hide(elem) { var curDisplay = getStyle(elem, "display"); if (curDisplay != "none") { elem.$oldDisplay = curDisplay; elem.style.display = "none"; } } //设置透明度 
function setOpacity(elem, num) { if (elem.filters) { elem.style.filter = "alpha(opacity=" + num + ")"; } else { elem.style.opacity = num / 100; } } //滑动 
function slideDown(elem) { var h = getFullHeight(elem); elem.style.height = "0px"; show(elem); for (var i = 0; i <= 100; i += 5) { new function() { var pos = i; setTimeout(function() { elem.style.height = (pos / 100 * h) + "px"; }, (pos * 10)); } } } //渐变
function fadeIn(elem) { show(elem); setOpacity(elem, 0); for (var i = 0; i <= 100; i += 5) { new function() { var pos = i; setTimeout(function() { setOpacity(elem, pos); }, (pos + 1) * 10); } } } //获取鼠标光标相对于整个页面的位置。 
function getX(e) { e = e || window.event; return e.pageX || e.clientX + document.body.scrollLeft; } function getY(e) { e = e || window.event; return e.pageY || e.clientY + document.body.scrollTop; } //获取鼠标光标相对于当前元素的位置。
function getElementX(e) { return (e && e.layerX) || window.event.offsetX; } function getElementY(e) { return (e && e.layerY) || window.event.offsetY; } //获取页面的高度和宽度
function getPageHeight() { var de = document.documentElement; return document.body.scrollHeight || (de && de.scrollHeight); } function getPageWidth() { var de = document.documentElement; return document.body.scrollWidth || (de && de.scrollWidth); } //获取滚动条的位置。
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.offsetHeight) || document.body.offsetHeight; } function windowWidth() { var de = document.documentElement; return self.innerWidth || (de && de.offsetWidth) || document.body.offsetWidth; }

 

你可能感兴趣的:(JavaScript)