JavaScript CSS修改学习第一章 查找位置

offset
在所有的浏览器里面元素的offsetTop和offsetLeft两个属性都是很有用的。他们会给出你元素相对于父元素的坐标位置。

这段代码会向上查找offsetParent，然后添加offsetTop和offsetLeft。最终无论offsetParent在哪，他都会给出你元素在屏幕上的真正坐标。

解释
这段代码非常简单。先传入要计算的元素，然后设置变量curleft和curtop为0。

代码如下:

function findPos(obj) {
var curleft = curtop = 0;

如果浏览器支持offsetParent：

代码如下:

if (obj.offsetParent) {

每次我们找到一个新的对象的时候，把他的offsetTop和offsetLeft加到curtop和curleft上：

代码如下:

do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;

小技巧：返回'='的值
下面就是这个技巧：

代码如下:

} while (obj = obj.offsetParent);

这个不是表达式错误。我不想用'=='来比较obj和obj.offsetParent（那也没有用，因为一个元素肯定和他的父元素不相等）。

所以我用'='来把obj.offsetParent的值传递给obj。在这里我对这个技巧有详细的解释。

简单的返回
这个循环会当元素没有了offsetParent的时候结束。当offsetParent存在的时候，就依然会把offsetLeft加到curleft上，把offsetTop加到curtop上。

当循环技术的时候，我们就把坐标返回给调用这个函数的程序。

代码如下:

return [curleft,curtop];}

翻译地址：http://www.quirksmode.org/js/findpos.html

转载请保留以下信息
作者：北玉(tw:@rehawk)

赞 (0)

相关推荐

  • JavaScript CSS修改学习第一章 查找位置

    offset 在所有的浏览器里面元素的offsetTop和offsetLeft两个属性都是很有用的.他们会给出你元素相对于父元素的坐标位置. 这段代码会向上查找offsetParent,然后添加offsetTop和offsetLeft.最终无论offsetParent在哪,他都会给出你元素在屏幕上的真正坐标. 解释 这段代码非常简单.先传入要计算的元素,然后设置变量curleft和curtop为0. 复制代码 代码如下: function findPos(obj) { var curleft =

  • JavaScript CSS修改学习第二章 样式

    另外,有时候你也许想知道添加到一个元素或者链接上的样式的具体内容.而style属性只能读取元素的内联形式的样式,所以如果你想读取其他样式就得另想办法了. 偏移 在使用一些小技巧之前,IE和Mozilla已经添加了一个比较好的办法:offsetSomething.使用这些属性你就能够读取这个段落现在的一些比较重要的样式. 举个例子,使用offsetWidth.你就能知道这个段落现在的宽度的像素值.为了测试,你可以改变一下窗口的大小然后再运行一下. 代码也非常的简单: 复制代码 代码如下: func

  • JavaScript CSS修改学习第五章 给“上传”添加样式

    JavaScript CSS修改学习第五章 给“上传”添加样式

    问题 在一个网站中可能我的输入框式下面这样的:  设计者可能想让上传部分也像这样然后再添加一个select按钮.但是当我想把普通的输入框改为上传框时就根本不能工作.浏览器之间有很大的不同,给默认按钮添加样式也几乎不可能. 这很难成为设计的很好的上传框,但是也是我们能做的最多的了. 注意到Safari的设计有些不同.Safari小组想关闭手动输入文件的功能,可能担心这样的溢出.这样设计有个缺点就是用户在选择了一个文件之后不能取消上传文件. 解决办法 读者Michael McGrady发明了一个不错

  • JavaScript CSS修改学习第六章 拖拽

    JavaScript CSS修改学习第六章 拖拽

    当示例的box上的#链接处于活动状态的时候(不论是用tab然后点击enter或者使用鼠标点击)这个元素就能够通过方向键拖拽.然后点击enter或者Esc释放.(可以随意改变这些键.我不确定释放键应该设置成为什么所以enter和Esc都可以) 使用 1.复制文章后面的dragDrop对象. 2.复制我的addEventSimple和removeEventSimple函数,这里需要. 3.设定keyHTML和keySpeed属性(下面有解释). 4.确定你所要拖拽的元素都有位置属性:absolute

  • JavaScript CSS修改学习第三章 修改样式表

    请注意代码和传统的DHTML的区别.在DHTML你通过直接修改页面上的特定元素来改变样式,而这里的代码修改的是样式表.在这里查看W3C DOM-CSS的兼容性列表.定义 一个页面总是包含一个或者几个样式表,一个样式表里面包含一条或者几条规则,一条规则里有详细的样式声明.这个页面的样式表如下: 复制代码 代码如下: <link rel="stylesheet" href="../quirksmode.css"> <style> <!--

  • JavaScript CSS 修改学习第四章 透明度设置

    JavaScript CSS 修改学习第四章 透明度设置

    这里是测试页.在JavaScript里面设置透明度 我用下面的代码来设置透明度: 复制代码 代码如下: function setOpacity(value) {     testObj.style.opacity = value/10;     testObj.style.filter = 'alpha(opacity=' + value*10 + ')'; } 在Mozilla和Safari里使用opacity,IE使用filter.value的值从0到10. 测试结果 IE说明:一个元素必须

  • JavaScript Event事件学习第一章 Event介绍

    没有event就没有脚本.可以看看任何有JavaScript代码的网页:几乎所有的例子都有一个事件触发了脚本.原因非常简单.JavaScript就是给你的页面添加内部活动:用户做一些事情然后页面做出回应. 因此JavaScript就需要一个方法能够检测到用户的动作然后才能知道什么时候做出反应.这还需要知道那个函数会被执行,函数会做一些你认为的给你的网页增色的动作.这些文字描述了如何去写这样的脚本.虽然不容易,但是这是一个很让人满足的工作. 当用户做了什么事情event就发生了,当然还有一些eve

  • JavaScript DOM学习第一章 W3C DOM简介

    在这一章我主要介绍已经被新一代的浏览器所支持的W3C 第一级的DOM.对他的运作做一个大概的了解并且让你知道你可以对他们做什么. 首先是对于DOM的一些建议和DOM设计的目的,然后我会告诉你什么是节点(nodes)并且怎样通过DOM树来遍历节点.接着是如何得到一个特定的节点,以及怎样改变他的值和属性.最后就是DOM的终极目标:怎么创建一个自己的新节点. 建议 Level 1DOM是W3C制定的用来提供给任何程序语言来访问XML文档的.不管你用什么语言程序来处理XML文档,只要是Level 1DO

  • Javascript入门学习第一篇 js基础第1/2页

    Javascript学习第一篇 js基础 1 , javascript字符集: javascript采用的是Unicode字符集编码. 为什么要采用这个编码呢? 原因很简单,16位的Unicode编码可以表示地球人的任何书面语言.这是语言 国际化的一个重要特征.(大家也许见过用中文写脚本,比如:function 我的函数() {}  ); Javascript中每个字符都是用2个字节表示的.(因为是16位编码) 2 ,大小写敏感: js是一种区分大小写的语言. 注意下:以前我也犯过的错误. HT

  • javascript 进阶篇2 CSS XML学习

    javascript 进阶篇2 CSS XML学习

    CSS全称是cascading style sheets,中文名字叫级联样式单,也叫层叠样式表.它的好处就是能让代码整齐,并且可以批量处理一些样式. 基本语法: 注释符:/* */ 选择符:selector {attribute:value} 同一个属性的值用空格符号隔开,不同属性用分号隔开. 区分大小写. 比如要给页面中的table定制样式,则写table {.....;.....;} 选择符的使用方法有很多种,于是我又一次懒得打,从网上抄来的: 选择符模式 说明 * 匹配任意元素.(通用选择

随机推荐