精通javascript 代码总结

在看了《精通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="#" onclick=" 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.youkuaiyun.com/dz45693/article/details/7683195

有关事件添加和移除请参照http://blog.youkuaiyun.com/dz45693/article/details/7622262