`

js获取div的坐标

div坐标div位置滚动条位置div方位div布局 
阅读更多

html中最常使用的控件就是div了,那么如何获取div的坐标呢?

如何方法可以实现.

/***
 * 获取div的坐标
 * @param divObj
 * @returns {{width: number, height: number, left: *, top: Window}}
 */
com.whuang.hsj.divCoordinate=function(divObj){
    if(typeof divObj == 'string'){
        divObj=com.whuang.hsj.$$id('divObj');
    }
    return {'width':divObj.offsetWidth,'height':divObj.offsetHeight,
        'x':divObj.offsetLeft,'y':divObj.offsetTop,
        'scrollLeft':com.whuang.hsj.getScroll().left,'scrollTop':com.whuang.hsj.getScroll().top};
}
// Cross browser gets the position of scroll
com.whuang.hsj.getScroll=function(){
    return {
        top:document.documentElement.scrollTop || document.body.scrollTop,
        left:document.documentElement.scrollLeft || document.body.scrollLeft
    }
}

 

com.whuang.hsj.divCoordinate()方法介绍

功能:返回div坐标;

参数:div对象或div的id(字符串);

返回值:对象,有六个属性:

width:div自身的宽度;

height:div自身的高度;

x:div左上角的坐标x;

y:div左上角的坐标y;

scrollLeft:水平滚动条的位置

scrollTop:竖直滚动条的位置

测试页面:

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
    <script type="text/javascript" src="js/common_util.js"></script>
    <script type="text/javascript">


        
    function run(){
            var loc=com.whuang.hsj.divCoordinate('divObj');
//            document.writeln();
            com.whuang.hsj.$$id('text22').innerHTML="width:"+loc.width+" &nbsp; , &nbsp; height:"+loc.height+" &nbsp;, &nbsp;scrollTop:"+loc.scrollTop+" &nbsp;, &nbsp;scrollLeft:"+loc.scrollLeft+" &nbsp;,&nbsp;x:"+loc.x+" &nbsp;,&nbsp; y:"+loc.y;
        }
    </script>
</head>
<body>

<div style="width: 599px;height: 499px;background-color: mediumvioletred;" id="divObj"  >

</div>
<br>
<input type="button" value="run" onclick="run();" >
<div  id="text22" style="width: 400px;" >
    </div>
</body>
</html>

 运行结果:

 

参考:

http://hw1287789687.iteye.com/admin/blogs/2156296

http://hw1287789687.iteye.com/admin/blogs/2155772

  • 大小: 23.2 KB
2
顶
0
踩
分享到：
| js判断浏览器类型
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js实现获取div坐标的方法

    总结来说，本文提供了获取div元素坐标的方法，并通过实际代码示例展示了如何应用这些方法。这不仅包括了获取元素宽高和位置的常规方法，还包括了如何处理页面滚动的复杂情况。对于从事前端开发的程序员来说，这些...

    js获取div的位置坐标

    ### JavaScript 获取 div 的位置坐标详解 #### 一、引言 在前端开发中，经常需要获取页面上某个元素（如 div）的位置坐标。这有助于实现诸如弹窗定位、元素拖拽等功能，提升用户体验。本文将详细介绍如何使用 ...

    three.js 3d坐标转平面坐标

    本教程将深入探讨如何在Three.js环境中将3D坐标转换为2D（平面）坐标，以便在网页上的div元素或其他2D元素上正确显示3D对象的一部分或全部。 首先，我们要理解3D坐标系统与2D坐标系统的区别。在3D空间中，每个点都...

    openlayers点击获取坐标Demo

    可以通过`event.coordinate`获取地图投影后的坐标（地图的坐标系统通常是地理坐标系，如EPSG:4326）： ```javascript map.on('pointerdown', function(event) { var clickCoord = event.coordinate; console.log...

    vue使用高德地图获取地理坐标信息

    在Vue.js应用中集成高德地图(Amap)以获取地理坐标信息是一项常见的需求，尤其在构建地理位置相关的Web应用时。高德地图API提供了丰富的功能，包括定位、路线规划、地图展示等。以下将详细介绍如何在Vue项目中使用...

    div随意拖动 记住坐标

    在网页设计中，"div随意拖动 记住坐标"是一种常见的交互功能，它允许用户通过鼠标拖动HTML中的div元素，并在松开鼠标时记录下该div元素的新位置坐标。这种功能通常结合JavaScript库，如jQuery UI的draggable插件来...

    获取图片或者div上的点坐标--带例子

    标题“获取图片或者div上的点坐标--带例子”所涉及的知识点主要是如何在JavaScript中实现这一功能。这里将详细讲解这一过程，并结合描述中的应用场景——制作图片地图描边，来展开讨论。 首先，我们需要了解HTML的`...

    JQuery获取鼠标坐标

    本文将深入解析如何利用JQuery和原生JavaScript获取鼠标坐标，包括其工作原理、代码实现以及注意事项。 ### JQuery获取鼠标坐标 #### 工作原理 JQuery简化了原生JavaScript的操作，提供了强大的选择器和事件处理...

    JavaScript获取鼠标位置和鼠标与div的相对位置

    在JavaScript中，获取鼠标位置和计算鼠标与特定div元素的相对位置是常见的需求，这在交互式网页开发中尤其重要。下面将详细讲解如何实现这些功能。 首先，我们需要理解两个基本概念：`event.clientX` 和 `event....

    JS点击百度地图获取坐标代码.zip

    在JavaScript代码中，使用`BMap`对象创建地图实例，设置地图容器（例如一个`div`元素）和中心点坐标。例如： ```javascript var map = new BMap.Map("container"); // 创建地图实例 map.centerAndZoom(new BMap....

    JS百度地图API获取地址坐标代码.zip

    "JS百度地图API获取地址坐标代码.zip"这个压缩包提供了一个示例，用于演示如何利用百度地图API实现用户在地图上点击获取坐标的效果。以下是对这个知识点的详细讲解： 首先，我们需要引入百度地图API的JavaScript库...

    获取图片或者div上的点坐标

    本文将深入探讨如何实现这一功能，并结合“getpoint.js”这个文件名，推测这是一个用于获取坐标值的JavaScript脚本。 首先，我们需要了解HTML中的`&lt;img&gt;`标签和`&lt;area&gt;`标签。`&lt;img&gt;`标签用于展示图像，而`&lt;area&gt;`...

    高德地图 js 搜索获取坐标转换地图添加标记

    本篇将详细探讨"高德地图js搜索获取坐标转换地图添加标记"的相关知识点。 首先，我们要了解高德地图API的核心功能。高德地图提供JavaScript SDK，它允许开发者通过JavaScript代码来操作地图，包括加载地图、设置...

    JS 图片选中区域坐标

    在JavaScript（JS）中处理图片选中区域坐标是一项常见的任务，尤其在图像编辑、标注或交互式应用中。本文将深入探讨如何实现这一功能，并提供相关的编程知识点。 首先，我们需要理解基本概念。在HTML中，我们可以...

    javascript浮动div，可拖拽div,遮罩层(div和iframe实现)

    2. **获取初始位置**：在 `mousedown` 事件处理函数中获取当前鼠标的坐标以及 Div 的初始位置。 3. **监听鼠标移动**：在 `mousedown` 事件处理函数中调用 `addEventListener` 添加 `mousemove` 事件监听器，实时...

    javascript获取对象的绝对坐标

    ### JavaScript 获取对象的绝对坐标 #### 知识点概述 在网页开发中，有时我们需要知道一个元素在其父级容器中的绝对位置，即该元素相对于页面左上角的坐标（X轴和Y轴的位置）。这对于实现某些动态效果或者交互功能...

    js移动div源代码

    总结起来，"js移动div源代码"涉及到的核心知识点包括JavaScript的DOM操作、事件监听、坐标计算以及可能的动画实现。通过学习和理解这部分源代码，开发者能够掌握如何使用JavaScript来实现动态布局，提升网页的交互性...

    js鼠标浮动显示div

    3. **定义监听器函数**：在监听器函数内，我们可以获取鼠标的位置（通过`event.clientX`和`event.clientY`），并根据这些坐标调整div的位置，使其跟随鼠标。同时，通过改变div的`display`属性，使其从隐藏变为可见。...

    JavaScript与Div对层定位和移动获得坐标的实现代码

    z=obj.style.zIndex //获取对象的z轴坐标值 //设置对象的z轴坐标值为100，确保当前层显示在最前面 obj.style.zIndex=100 x=event.offsetX //获取鼠标指针位置相对于触发事件的对象的X坐标 y=event.offsetY

Magicbox
Global site tag (gtag.js) - Google Analytics