js怎么获取当前子菜单的top值和left 值

JavaScript020

js怎么获取当前子菜单的top值和left 值,第1张

首先要取得top值和left值，先要把这个div的定位设为

relative

或者

absolute

比如：

<div

id="tiao"

style="margin-top:

3margin-left:

-5width:

470height:

25position:relative"

></div>

top值：

document.getelementbyid('tiao').offsettop+document.body.scrolltop

left值：document.getelementbyid('tiao').offsetleft

是这样的，一开始需要获取某一个元素的 left 值，我就用 ele.style.left 去获取了（基础不扎实还好意思来丢人），然后居然返回的是空。

好吧，追本溯源，问题的根源以及区别就在这里了。

所以，我那样是获取不到某一个元素的一个其他方式设置的样式属性值的，所以我就打算谷歌一下别的方法了。

特点：

- 只可读，但是可以读取所有的样式属性值。但是不能通过该方法去设置样式属性值。

currentStyle 获取的是一个元素的所有的样式属性值，这一点功能是与 getComputedStyle() 一样的，但是在获取某一个具体的属性的时候，可以结合 getAttribute 来实现。

和 getComputedStyle 方法不同的是，currentStyle 要获得属性名的话必须采用驼峰式的写法。也就是如果我需要获取 font-size 属性，那么传入的参数应该是 fontSize。因此在IE 中要获得单个属性的值，就必须将属性名转为驼峰形式。 ( 感谢这篇文章。 )

关于 getComputedStyle 返回的值，具体查看这里。

不管你最初定义的样式是什么，涉及到宽度高度之类的，返回的都是最后实际使用的宽度和高度。

关于 ele.style 的返回值，是和定义的样式的值相等的，如果设置为auto，就直接返回auto。

然后是元素的高宽，对于一个没有设定高宽的元素而言，在 IE678 下使用 getPropertyValue("width|height") 得到的是 auto 。而标准浏览器会直接返回它的 px 值，当然我们希望在 IE 下也返回 px 值。

这里的 HACK 方法是使用 element.getBoundingClientRect() 方法。

element.getBoundingClientRect() -- 可以获得元素四个点相对于文档视图左上角的值 top、left、bottom、right ，通过计算就可以容易地获得准确的元素大小。

参考链接 chokcoco的博客园

js获取DIV的位置坐标的方法大概有两种：

第一种：编辑代码：var odiv=document.getElementById('divid')

alert(odiv.getBoundingClientRect().left)

alert(odiv.getBoundingClientRect().top)

第二种：编辑代码function CPos(x, y) {this.x = x this.y = y} /*** 得到对象的相对浏览器的坐标*/ function GetObjPos(ATarget {var target = ATargetvar pos = new CPos(target.offsetLeft, target.offsetTop)var target =target.offsetParentwhile (target  pos.x += target.offsetLeft  pos.y += target.offsetTop target = target.offsetParent }return pos }var obj =  document.getElementById('divid') alert(GetObjPos(obj)['x'])//x坐标alert(GetObjPos(obj)['y'])//y坐标

SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN