`
xingzhizhou
  • 浏览: 7160 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

获取页面元素位置

阅读更多
获取页面大小
function getPagearea(){
    if (document.compatMode == "BackCompat"){
      return {
        width: Math.max(document.body.scrollWidth,
                document.body.clientWidth),
        height: Math.max(document.body.scrollHeight,
                document.body.clientHeight)
      }
    } else {
      return {
        width: Math.max(document.documentElement.scrollWidth,
                document.documentElement.clientWidth),
        height: Math.max(document.documentElement.scrollHeight,
                document.documentElement.clientHeight)
      }
    }
  }

//可见区域大小
  function getViewport(){
    if (document.compatMode == "BackCompat"){
      return {
        width: document.body.clientWidth,
        height: document.body.clientHeight
      }
    } else {
      return {
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
      }
    }
  }
//元素的绝对位置
  function getElementLeft(element){
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;

    while (current !== null){
      actualLeft += current.offsetLeft;
      current = current.offsetParent;
    }

    return actualLeft;
  }

  function getElementTop(element){
    var actualTop = element.offsetTop;
    var current = element.offsetParent;

    while (current !== null){
      actualTop += current.offsetTop;
      current = current.offsetParent;
    }

    return actualTop;
  }

快速获取网页元素的相对位置
目前,IE、Firefox 3.0+、Opera 9.5+都支持该方法,而Firefox 2.x、Safari、Chrome、Konqueror不支持。

  var X= this.getBoundingClientRect().left;

  var Y =this.getBoundingClientRect().top;

分享到:
评论

相关推荐

    获取元素绝对位置 position

    在前端开发中,获取元素的绝对位置是一个常见的需求,它涉及到网页布局和交互设计。"获取元素绝对位置 position"这个话题主要关注JavaScript中如何准确地定位DOM元素在页面中的坐标。这里,我们将深入探讨相关知识,...

    网页元素位置(scroll、client、offsetWidth等)获取、设置详解

    网页元素位置(scroll、client、offsetWidth等)获取、设置详解

    获取网页上 xpath , css 路径的插件, 方便爬虫、自动化测试相关软件工作者快速获取页面上html元素路径

    在IT行业中,尤其是在网页爬虫和自动化测试领域,获取网页上的XPath和CSS选择器路径是一项基本且重要的技能。XPath和CSS选择器是两种常见的定位HTML元素的方法,它们被广泛用于网页抓取、网页自动化和测试工具中。这...

    Javascript元素位置、大小、鼠标定位操作

    Javascript 元素位置、大小、鼠标定位操作 本文将详细介绍 Javascript 中元素位置、大小、鼠标定位操作相关的知识点,包括事件对象、DOM 对象、Style 对象等提供的相关属性和方法。 一、事件对象 Event 事件对象 ...

    js getBoundingClientRect() 来获取页面元素的位置.docx

    下面是一个使用 getBoundingClientRect() 方法获取元素位置的示例代码: ```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...

    Vue获取页面元素的相对位置的方法示例

    在Vue应用中,有时我们需要获取页面元素的相对位置,以便实现一些交互效果,如固定定位、滚动监听等。本篇文章将详细讲解如何在Vue中获取元素的相对位置,并提供示例代码。 首先,`getBoundingClientRect()` 是...

    用Javascript 获取页面元素的位置的代码

    以上就是JavaScript获取网页元素位置的基础知识,这些技巧在开发网页动态效果、响应式布局以及与用户交互的场景中都十分实用。通过熟练掌握这些方法,开发者能够更好地控制和调整网页的显示效果。

    获取页面元素实际宽高的属性的使用

    ### 获取页面元素实际宽高的属性使用详解 在前端开发中,了解如何准确地获取页面元素的实际宽高是非常...合理使用这些属性可以帮助我们更精确地控制页面布局和元素位置,从而提升用户体验。希望本文能对你有所帮助!

    javascript获取隐藏元素(display:none)的高度和宽度的方法

    3. 获取完尺寸后,需要将元素的display属性和visibility属性恢复原样,以避免元素位置错乱或其他布局问题。 例如,以下是一个使用jQuery库的JavaScript函数,用以获取隐藏元素的尺寸: ```javascript function ...

    JavaScript获取指定元素位置的方法

    总的来说,理解和掌握这些JavaScript获取元素位置的方法对于前端开发是至关重要的。通过结合使用`getBoundingClientRect()`、`scrollLeft`、`scrollTop`和`offsetHeight`等属性,我们可以精确地定位页面上的任何元素...

    js获取页面控件坐标.pdf

    获取页面控件坐标是 JavaScript 编程中非常重要的一部分,我们可以使用多种方法来获取元素的坐标,包括使用 offsetLeft 和 offsetTop 属性、getBoundingClientRect() 方法和 JavaScript 库等。 此外,在 HTML 文...

    分析网页对网页元素的获取方法提供参考

    通过指定元素的位置或特性,如`//a[@href]`或`/html/body/div[1]`,可以获取特定的网页元素。 7. **AJAX和异步加载**:现代网页常常使用AJAX技术动态加载内容,这时我们需要监听`DOMSubtreeModified`事件或使用...

    selenium如何定位元素位置

    Selenium提供了多种方法来定位网页元素,这些方法包括但不限于ID、XPath、CSS选择器、类名、链接文本、名称等。 1. **ID定位**:使用`driver.findElement(By.id("elementId"))`,这里的`elementId`是网页元素的ID...

    java源码 安卓自动化获取界面元素(appium-desktop) 2018127

    1. Inspector:Appium Desktop的Inspector功能可以帮助开发者捕获和分析应用的UI结构,获取界面元素的属性,如ID、文本、位置等,这对于编写自动化测试脚本非常有帮助。 2. Session管理:用户可以通过Appium ...

    js getBoundingClientRect() 来获取页面元素的位置

    总结来说,`getBoundingClientRect()`是JavaScript中获取元素可视位置的关键工具,简化了开发者获取页面元素位置的工作,特别是在处理滚动、响应式设计以及各种动态布局时。它提供了准确、高效的方式来定位页面上的...

    JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)

    在Web开发中,获取页面尺寸、滚动条位置以及元素位置是前端开发工程师经常需要处理的任务。这些功能对于动态调整页面布局、实现滚动监听以及确定元素在页面中的确切位置至关重要。本文将详细解释使用纯JavaScript...

    javascript 精确获取页面元素的位置

    代码如下: //取得元素x坐标 function pageX(elem) { return elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft; } //取得元素y坐标 function pageY(elem) { return elem.offsetParent?...

    用JavaScript获取DOM元素位置和尺寸大小的方法

    总之,理解和掌握JavaScript中的DOM元素位置和尺寸获取方法是Web开发中的基本技能,这对于创建交互式、响应式的网页至关重要。通过熟练运用这些属性和方法,开发者可以实现各种创新的效果,提升用户体验。

    javascript getBoundingClientRect() 来获取页面元素的位置的代码[修正版]第1/2页

    它的使用极大地提高了获取页面元素位置的效率,特别是在处理动态布局或者需要精确计算元素位置的场景时。 在早期的非IE浏览器中,开发者通常需要通过递归或循环遍历元素的祖先节点,计算元素相对于文档的偏移量来...

    jQuery获取页面元素绝对与相对位置的方法

    本文实例讲述了jQuery获取页面元素绝对与相对位置的方法。分享给大家供大家参考。具体如下: 获取页面某一元素的绝对X,Y坐标,可以用offset()方法: var X = $('#DivID').offset().top; var Y = $('#DivID').offset...

Global site tag (gtag.js) - Google Analytics