JS中怎么获取input所在页面的绝对坐标_框架

你好，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; // 距左侧

希望能解决你的问题，有疑问可追问，望采纳~

题主，不知道你的代码上下文环境，全局变量是否被局部变量修改。

我这里写了一个按照你两个代码片段逻辑实现的代码，是没有问题的，由于我这里不引用jQuery，就用原生JS实现了，第一个返回值通过点击d出，第二个返回值通过鼠标离开元素d出，你可以试一下。

<!DOCTYPE html>

<html>

<head>

<title>点击和移开鼠标获取元素在页面中距离左边的距离</title>

</head>

<body>

</body>

var box = documentgetElementById("sv");

// 获得ID为sv的元素，保存为变量box

boxonclick = function() {

// 当ID为sv的元素被点击

var pos = boxgetBoundingClientRect();

// 获得box元素在页面中的位置，保存为变量pos

alert(posleft);

// d出box元素在页面中的左边距

};

var pos = boxgetBoundingClientRect();

// 获得box元素在页面中的位置，保存为变量pos（在两个代码片段中，这里的box是谁？和上图中的代码是同一个？这里默认是同一个）

boxonmouseout = function() {

// 当鼠标离开ID为sv的元素

alert(posleft);

// d出box元素在页面中的左边距

};

</script>

</html>

<!doctype html>

<html>

<head>

<title>无标题文档</title>

<!--

var MaxLeft = 1000; //最大边距值

var Stepping = 100; //步进边距值

/上面的值可以改动，下面的代码就不要改了/

var Margin = 0; //原边距

$ = function( id ) { return documentgetElementById( id );}

windowonload = function() {

$('a')onclick = function(){

Margin = parseInt( $('b')styleleft ); //取得B元素当前左边距

if ( Margin >= MaxLeft ) { //如果当前边距大于等于设定的最大边距

$('b')styleleft = '0px'; //设置左边距为0

$('view')innerHTML = 0; //这个只是个显示作用，可以删除

} else { //否则

$('b')styleleft = (Margin + Stepping) + 'px'; //给原边距加上设定的步进值

$('view')innerHTML = (Margin + Stepping); //这个只是个显示作用，可以删除

}

};

//-->

</script>

</head>

<body>

</body>

</html>

经过测试，在ie12、 360极速和兼容模式下都正常运行，其他浏览器就不知道了，没有测试！

以div为例：

拖动后记录x,y值

给div加上mousePosition事件

function mousePosition(evt){

evt = evt || windowevent;

return {

x : evtclientX + documentbodyscrollLeft - documentbodyclientLeft,

y : evtclientY + documentbodyscrollTop - documentbodyclientTop

}

第二次打开页面div定位

$(“div”)attr("top",y)attr("left",x);

如果元素是body内的一级元素，可以用offsetLeft直接获得其左边距。

如果元素是嵌套的，且父元素中存在容器元素（即具有定位属性的元素，包括绝对定位、相对定位、固定定位），则情况要变复杂了，需要把所有容器的offsetLeft和元素的offsetLeft相加才是最终的左边距：

var obj=documentgetElementById("test"); //假定元素的id为test

var left=objoffsetLeft;

while(obj=objoffsetParent){

left+=objoffsetLeft;

}

consolelog(left); //left就是左边距

以上就是关于JS中怎么获取input所在页面的绝对坐标全部的内容，包括:JS中怎么获取input所在页面的绝对坐标、关于js的getBoundingClientRect方法、求js代码，单击a元素之后获取b元素左边距，然后使b元素左边距等于原本边距加上100px,麻烦给完整些的答案等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/9592217.html

JS中怎么获取input所在页面的绝对坐标

发表评论

评论列表（0条）