Posts Tagged ‘Javascript’
JavaScript中获取元素的绝对位置
6 Oct 2008在一些应用中，可能会有需要知道某一个控件在页面中的位置，在网上比较容易找到下面这个解决方法。
在页面中有一个按钮：
<input id="a" type="button" value="click me to get position"
onclick="getPos(this)" />
在脚本中响应点击事件的是这个函数：
1
2
3
4
5
6
7
8
9
function getPos(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
alert("top="+t+"\nleft="+l);
}
这个方法的实现相当精炼，意思就是先取得自己的相对位置，再叠加其最近的相对位置容器（offsetParent，它不一定是其父节点）的相对位置，直至顶层位置容器（一般就是body），从而得出该节点的相对位置。
不过，很快就发现这个函数也许并不够用，因为我在页面里有可能使用了一些CSS来使得本来平铺的画面变成一个滚动区域，例如设置了父节点的height为 某个值，并且其overflow设为auto或者scroll。这时，上面的方法因为没有计算其滚动偏移，所以所得的值不一定是元素当前的绝对位置，所以 我对上面的方法进行了一些小改动，实际上就是加入了对其滚动偏移量的计算。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function getPosition(sender) {
[...]
- (3) Comments
- Tags: Javascript
scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
In: Javascript| Web前台相关
6 Oct 2008scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
以上主要指IE之中，FireFox差异如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width – border
clientHeight = height – border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
- No Comments
- Tags: Javascript
非常齐全的document body window div 高度、宽度、鼠标坐标图解
In: Javascript| Web前台相关| 新闻| 没用的话
6 Oct 2008- No Comments
- Tags: Javascript
分享几个js牛人的blog
In: Javascript| Web前台相关
2 Oct 2008JQuery的作者：http://ejohn.org/
Pro Javascript Techniques里面提到的：
http://dean.edwards.name/
http://dean.edwards.name/weblog/
以后有新的再补充～～
- No Comments
- Tags: Javascript
Javascript学习笔记–类的继承
In: Javascript| Web前台相关
2 Oct 2008最近在看天雪发给我看的一本Javascript的书，是JQuery之父写的，写得很棒，里面推荐的资源也很棒。为了弥补我的差记性，特写下学习笔记。
http://javascript.crockford.com/inheritance.html
这个是讲Js里面的类继承的写法，这个作者太犯贱了，上面的例子都是用自己写的方法，结果方法在最下面才写出来，告诉我们。搞得我一开始以为是内置的方法呢。。。不过他的方法写得太酷了，下面列举一下：
Sugar（作者管他写的方法叫做糖，确实很甜）
To make the examples above work, I wrote four sugar methods. First, the method method, which adds an instance method to a class.
为了上面的例子跑起来，我写了四个很甜的方法。首先，是method方法，它是用来把方法添加到class里的。
1
2
3
4
Function.prototype.method = function (name, func) {
this.prototype[name] = func;
return this;
};
This adds a public method to the Function.prototype, so all functions get it by Class [...]
- (1) Comment
- Tags: inheritance, Javascript
关于博主
姓名：郑玏
性别：男
职业：IT工程师
爱好：KTV、乒乓球、台球、五子棋、围棋、编程
语言：中文、英语、闽南语
Email：
