//获取元素的样式值。
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;
}

《Pro JavaScript Techniques》中的一些函数的更多相关文章

  1. 借助JavaScript中的时间函数改变Html中Table边框的颜色

    借助JavaScript中的时间函数改变Html中Table边框的颜色 <html> <head> <meta http-equiv="Content-Type ...

  2. javascript中通过匿名函数进行事件绑定

  3. 前端学习 第二弹: JavaScript中的一些函数与对象(1)

    前端学习 第二弹: JavaScript中的一些函数与对象(1) 1.apply与call函数 每个函数都包含两个非继承而来的方法:apply()和call(). 他们的用途相同,都是在特定的作用域中 ...

  4. JavaScript中的普通函数与构造函数比较

    问题 什么是构造函数?构造函数与普通函数区别是什么?用new关键字的时候到底做了什么?构造函数有返回值怎么办?构造函数能当普通函数调用吗? thisthis永远指向当前正在被执行的函数或方法的owne ...

  5. 理解和使用 JavaScript 中的回调函数

    理解和使用 JavaScript 中的回调函数 标签: 回调函数指针js 2014-11-25 01:20 11506人阅读 评论(4) 收藏 举报  分类: JavaScript(4)    目录( ...

  6. JavaScript中变量和函数声明的提升

    现象: 1.在JavaScript中变量和函数的声明会提升到最顶部执行. 2.函数的提升高于变量的提升. 3.函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找. 4.匿名函数不会提升. ...

  7. [转]理解与使用Javascript中的回调函数

    在Javascript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中被创建,能从函数中返回. 因 ...

  8. 【JavaScript】理解与使用Javascript中的回调函数

    在Javascript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中被创建,能从函数中返回. 因 ...

  9. JavaScript ES7 中使用 async/await 解决回调函数嵌套问题

    原文链接:http://aisk.me/using-async-await-to-avoid-callback-hell/ JavaScript 中最蛋疼的事情莫过于回调函数嵌套问题.以往在浏览器中, ...

随机推荐

  1. LoadRunner去除事物中的程序的执行时间

    大家在性能测试过程中,经常会用到程序处理或组织数据,以达到一定的测试目的,但是程序本身执行会消耗一些时间,这部分消耗的时间是包含在响应时间里面,此时,响应时间=正常响应时间+程序执行消耗时间.那么如何 ...

  2. LeetCode 118. 杨辉三角

    118. 杨辉三角 给定一个非负整数numRows,生成杨辉三角的前numRows行. 在杨辉三角中,每个数是它左上方和右上方的数的和. 示例 输入: 5 输出: [ [1], [1,1], [1,2 ...

  3. linux下安装nodejs及linux下解压tar.xz文件

    1.下载nodejs的安装包  2.解压该文件 在linux下,大部分情况下不能直接解压tar.xz的文件. 需要用xz -d xxx.tar.xz 将 xxx.tar.xz解压成 xxx.tar 然 ...

  4. 洛谷P3444 [POI2006]ORK-Ploughing [枚举,贪心]

    题目传送门 ork 格式难调,题面就不放了. 分析: 一道偏难的贪心和枚举题.考试的时候是弃疗了...yyb巨佬已经讲的很详细了,推荐他的博客.这里小蒟蒻就只放代码了. Code: #include& ...

  5. 关联的CURD

    在保存的前面必须先建立好关联.但是默认情况下还是不会自动保存,如果保存会出错. Cascade all所有关联的所有持久化都是级联到另一个对象.保存这个对象的时候关联的对象自动保存. Cascade只 ...

  6. Hibernate 基于外键的单项一对一关联映射

    在开发过程中很多时候会用到表与表之间一对一的关联关系,本文简单介绍在Hibernate4中单项一对一的关联映射. 1.设计表结构 2.创建Person对象 3.创建IdCard对象 4.写hbm.xm ...

  7. [APIO2014]序列分割 --- 斜率优化DP

    [APIO2014]序列分割 题目大意: 你正在玩一个关于长度为\(n\)的非负整数序列的游戏.这个游戏中你需要把序列分成\(k+1\)个非空的块.为了得到\(k+1\)块,你需要重复下面的操作\(k ...

  8. (转载)打破某些大牛比较呵呵的MySQL无file权限读root hash的谣言

    如题.比如乌云社区发帖的这位大牛http://zone.wooyun.org/content/12432 看那帖子标题就很喜感有木有,大概意思就是创建了一个没有file权限的账户test,然后不能lo ...

  9. 【9.22校内测试】【可持久化并查集(主席树实现)】【DP】【点双联通分量/割点】

    1 build1.1 Description从前有一个王国,里面有n 座城市,一开始两两不连通.现在国王将进行m 次命令,命令可能有两种,一种是在u 和v 之间修建道路,另一种是询问在第u 次命令执行 ...

  10. bzoj1002 生成树计数 找规律

    这道题第一眼是生成树计数,n是100,是可以用O(n^3)的求基尔霍夫矩阵的n-1阶的子矩阵的行列式求解的,但是题目中并没有说取模之类的话,就不好办了. 用高精度?有分数出现. 用辗转相除的思想,让它 ...