`
Pweb
  • 浏览: 55282 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Javascript中Element元素定位详解

阅读更多



scrollHeight: 获取对象的滚动高度。  
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 
scrollWidth:获取对象的滚动宽度 
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置  
event.clientX 相对文档的水平座标 
event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标 
event.offsetY 相对容器的垂直坐标  
document.documentElement.scrollTop 垂直方向滚动的值 
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 

以上主要指IE之中,FireFox差异如下: 
IE6.0、FF1.06+: 
clientWidth = width + padding 
clientHeight = height + padding 
offsetWidth = width + padding + border 
offsetHeight = height + padding + border 

scrollHeight = 当前元素Height + 内部隐藏元素Height
IE5.0/5.5: 
clientWidth = width - border 
clientHeight = height - border 
offsetWidth = width 
offsetHeight = height 
(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

 

  • 大小: 17 KB
分享到:
评论

相关推荐

    HTML+CSS+JavaScript实用详解

    CSS选择器用于定位HTML元素,如`#id`选择具有特定ID的元素,`.class`选择具有特定类名的元素,`element`选择所有特定类型的元素。CSS属性如`color`、`background-color`、`font-size`等定义样式,`display`属性用于...

    Selenium+Python(元素定位).pdf

    ### Selenium与Python结合进行元素定位详解 #### 一、Selenium简介 Selenium是一个用于Web应用程序测试的强大自动化框架。它可以模拟真实用户的操作行为,并且能够跨多种浏览器和平台执行自动化测试脚本。Selenium...

    VUE+VUEX+element集成的H5

    在健身房H5应用中,Element UI可能被用来设计课程列表、预约表单、地图定位等界面元素,提供一致且美观的用户体验。 4. **课程浏览**:这部分功能涉及到前端数据展示和交互,可能利用Vue的动态组件和路由来实现课程...

    【JavaScript源代码】react中的虚拟dom和diff算法详解.docx

    React中的虚拟DOM(Virtual DOM)和Diff算法是前端开发中非常关键的概念,它们极大地提高了JavaScript操作DOM时的性能。在JavaScript中,直接操作DOM是非常昂贵的,因为每次修改DOM都会触发浏览器重新布局、重绘和...

    selenium处理元素定位点击无效问题

    ### Selenium处理元素定位点击无效问题详解 在进行Web自动化测试时,经常会出现元素已经定位成功但点击操作却不起作用的情况。这种情况可能由多种原因导致,包括但不限于页面元素未完全加载、元素被其他DOM元素遮挡...

    JavaScript属性scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解

    例如,`element.scrollLeft = 100`会将元素的可视内容向右移动100像素。 2. `scrollWidth`: 这个属性返回元素的总宽度,包括看不见的部分(如被滚动条遮住的部分)。它比`offsetWidth`宽,因为`offsetWidth`不包含...

    详解JavaScript中的坐标和距离

    在JavaScript中,坐标和距离的计算对于前端开发者来说至关重要,因为它们涉及到用户界面的交互、动画效果以及元素定位。在本文中,我们将深入探讨JavaScript中与坐标和距离相关的概念,主要包括`window`对象的属性和...

    详解 javascript中offsetleft属性的用法

    JavaScript中的offsetLeft属性是DOM元素的一个只读属性,它用来获取当前元素距离其最近的已定位(即position属性不是static的)父辈元素左边缘的距离。如果找不到已定位的父辈元素,那么它会返回元素距离整个文档...

    Selenium执行Javascript脚本参数及返回值过程详解

    在实际应用中,我们可以使用Selenium定位到页面元素,然后通过Javascript脚本来修改其属性或者执行其他操作。例如,下面的代码展示了如何通过Selenium定位到百度搜索框,并使用Javascript脚本为其设置背景颜色和边框...

    107条javascript语句

    ### JavaScript核心知识点详解 #### 一、文档对象模型(Document Object Model, DOM) - **基本概念**:DOM 是一种标准的编程接口,用于对 HTML 和 XML 文档进行操作。通过 DOM,JavaScript 可以访问页面上的任何...

    JavaScript 中有关数组对象的方法(详解)

    在JavaScript中,数组对象是编程时经常使用的数据结构,它提供了丰富的操作方法来方便地处理和操作数组元素。本文将详细解析JavaScript中数组对象的一些主要方法。 首先,我们来看看如何添加数组元素。`push()`方法...

    dongweed-draggable_div-master_javascript_

    【标题】"dongweed-draggable_div-master_javascript_"是一个基于JavaScript实现的可拖动div元素的小型项目,主要用于Web前端开发中的交互测试。这个项目的核心功能是允许用户通过鼠标操作,自由地在网页上移动指定...

    40种javascript小技巧

    ### JavaScript小技巧详解 #### 技巧1:屏蔽鼠标右键 通过在HTML元素上设置`oncontextmenu="window.event.returnValue=false"`属性,可以禁止用户在该元素上使用鼠标右键。例如: ```html ;"> 无法右击此表格 ```...

    jQuery1.8.0学习文档 详解

    - :first、:last、:not(selector)、:even、:odd、:eq(index)、:gt(index)、:lt(index)等,这些都是过滤元素的有用方法,用于定位集合中特定的元素。 4. 特定类型或状态的选择器: - :header选择所有标题元素。 -...

    css-dictionary(CSS常用英语词汇详解)

    用于CSS中的`position`属性,使元素脱离文档流,并相对于最近的非静态定位祖先元素定位。 - **Active**: 激活状态。CSS中用于表示链接被点击时的状态,通常用作`:active`伪类。 - **Align**: 对齐。用于描述元素如何...

    Selenium 中文API.doc

    #### 三、元素定位器(Element Locators) 元素定位器告诉Selenium向哪个HTML元素发送命令。常用的定位器包括: - **identifier=id**:根据指定的`@id`属性选择元素。如果没有匹配的值,则选择第一个`@name`属性与...

    document.all[]详解

    - **This array provides access to every element in the document**:这个数组提供了对文档中每一个元素的访问途径。 简单来说,`document.all[]` 提供了一个快速简便的方式来遍历整个页面中的元素。 #### 三、...

    JQuery开发技术详解光盘源码

    通过选择器,我们可以快速定位到页面上的任何元素,如`$("#elementID")`选择ID为"elementID"的元素,`$(".className")`选择所有类名为"className"的元素。此外,`$("tagname")`可以选取指定标签的所有元素。对元素的...

    Javascript 的内部对象

    ### JavaScript 的内部对象详解 #### 一、概述 在JavaScript中,存在许多内置对象,它们为开发者提供了丰富的功能,能够帮助实现网页与用户之间的交互、数据处理等多种需求。本文将重点介绍几个常用的JavaScript...

Global site tag (gtag.js) - Google Analytics