首先标签position要设置成相对、绝对定位
然后获取元素
var dom = documentgetElementById("元素id")//你可以用其它方法获得
alert(domoffsetLeft)//left
alert(domoffsetTop)//top
这样就获得了,但是前提是它外层套的标签没有设置成相对、绝对定位的,否则位置是相对于那个标签的位置,这个就需要获取offsetParent 判断父级是谁了
精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
eventclientX 相对文档的水平座标
eventclientY 相对文档的垂直座标
eventoffsetX 相对容器的水平坐标
eventoffsetY 相对容器的垂直坐标
documentdocumentElementscrollTop 垂直方向滚动的值
eventclientX+documentdocumentElementscrollTop 相对文档的水平座标+垂直方向滚动的量
实现代码
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN"
">
你好,JS没有直接获取元素相对于页面的绝对坐标的方法。但是我们可以通过相关值的计算而得到。首先我们假设input元素ID为"J_MyInput",然后看下面代码注释:
var input = documentgetElementById('J_MyInput'); // 根据ID取得元素对象var sizeObj = inputgetBoundingClientRect(); // 取得元素距离窗口的绝对位置
// 窗口的滚动偏移(垂直、水平)
var bodyOffset = {top: documentbodyscrollTop, left: documentbodyscrollLeft};
// 元素相对于页面的绝对位置 = 窗口滚动偏移 + 元素相对于窗口的绝对位置
var inputOffsetTop = sizeObjtop + bodyOffsettop; // 距顶部
var inputOffsetLeft = sizeObjleft + bodyOffsetleft; // 距左侧
希望能解决你的问题,有疑问可追问,望采纳~
js获取DIV的位置坐标的方法大概有两种:
第一种:编辑代码:var odiv=documentgetElementById('divid');
alert(odivgetBoundingClientRect()left);
alert(odivgetBoundingClientRect()top);
第二种:编辑代码function CPos(x, y) {thisx = x; thisy = y;} / 得到对象的相对浏览器的坐标/ function GetObjPos(ATarget {var target = ATarget;var pos = new CPos(targetoffsetLeft, targetoffsetTop);var target =targetoffsetParentwhile (target posx += targetoffsetLeft posy += targetoffsetTop; target = targetoffsetParent }return pos; }var obj = documentgetElementById('divid') alert(GetObjPos(obj)['x'])//x坐标alert(GetObjPos(obj)['y'])//y坐标
SPAN 和 DIV 的区别在于,DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN 是行内元素,SPAN 的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN
你将
#box1 ul li {width:190px; height:50px; line-height:50px; margin:5px; float:left; text-align:center; background:#ccc; list-style-type:none; position:relative;}
#box1 ul li div {width:280px; height:30px; line-height:30px; background:#ff0; text-align:center; position:absolute; top:10px; left:30px; z-index:999; display:none; }
中的 width 改成一样的值就可以了 都换成190px
以上就是关于javascript 怎样取得标签的位置全部的内容,包括:javascript 怎样取得标签的位置、js怎么取得文本框的宽度与高度、JS中怎么获取input所在页面的绝对坐标等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)