`

JS:offsetWidth\offsetleft 等图文解释

    博客分类:
  • js
 
阅读更多




网页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth (包括边线的宽);
网页可见区域高: document.body.offsetHeight (包括边线的宽);
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度: window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;

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

IE5.0/5.5:

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

HTML控件offsetTop、scrollTop等属性

假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。

obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。

obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。

obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。
  • 大小: 17 KB
分享到:
评论

相关推荐

    详解 javascript中offsetleft属性的用法

    除了offsetLeft和offsetTop外,offsetWidth和offsetHeight也是JavaScript中非常重要的属性。它们分别用于获取元素的宽度和高度。这些属性在进行页面布局时非常有用,特别是在动态计算元素的位置和大小时。 6. ...

    scrollwidth和offsetwidth区别

    * offsetLeft:获取对象相对于版面或由 offsetLeft 属性指定的父坐标的计算左侧位置 这些属性可以帮助我们更好地控制 HTML 元素的布局和样式。 在最后,我们可以总结出 ScrollWidth 和 OffsetWidth 之间的关键区别...

    JavaScript中offsetWidth的bug及解决方法

    在JavaScript中,`offsetWidth` 是一个非常常用的属性,它用于获取一个元素的总宽度,包括内边距(padding)和边框(border),但不包括外边距(margin)。这个属性在处理元素尺寸变化时非常有用,但在某些特定情况...

    Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性第1/2页

    Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性 在Javascript拖拽系列文章中,offsetLeft、offsetTop、offsetWidth、offsetHeight四个属性都是非常重要的,它们都是关于位置定位...

    offsetWidth与style.width的区别

    在Web开发中,理解和掌握`offsetWidth`与`style.width`的区别是至关重要的,它们都是JavaScript中用于获取HTML元素尺寸的属性,但有着不同的应用场景和返回值。让我们深入探讨这两个属性,以及它们如何影响网页元素...

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

    2. offsetWidth 和 offsetHeight:获取元素的宽度和高度,包括边框、padding、margin 等。 3. clientWidth 和 clientHeight:获取元素的宽度和高度,excluding 边框、padding、margin 等。 4. scrollTop 和 ...

    JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍

    ### JS中offsetTop、clientTop、scrollTop、offsetHeight各属性详解 #### 一、概述 在JavaScript中,处理页面布局和滚动效果时经常会用到一些DOM属性,如`offsetTop`、`clientTop`、`scrollTop`和`offsetHeight`等...

    基于js中style.width与offsetWidth的区别(详解).docx

    ### 基于JavaScript中`style.width`与`offsetWidth`的区别详解 #### 一、引言 在前端开发过程中,经常会遇到需要获取或修改DOM元素尺寸的情况。其中,`style.width` 和 `offsetWidth` 是两个常用的方法,用于获取...

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解

    ```javascript // 获取元素 var elem = document.getElementById('example'); // 设置滚动位置 elem.scrollTop = 100; elem.scrollLeft = 50; // 获取滚动位置 console.log(elem.scrollTop); // 输出 100 console....

    javascript获取网页各种高宽及位置的方法总结

    根据给出的文件信息,本文将详细介绍如何使用JavaScript来获取网页中各种元素的尺寸、位置等信息。 ### 屏幕尺寸和浏览器窗口尺寸 首先,可以通过`screen`对象获取屏幕的分辨率信息,以及浏览器窗口的位置和尺寸...

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

    在JavaScript中,理解和掌握`scrollLeft`、`scrollWidth`、`clientWidth`以及`offsetWidth`这四个属性对于创建动态且响应式的网页至关重要。这些属性都与元素的尺寸和定位有关,尤其在处理滚动条和元素可视区域时...

    js图片无缝平滑滚动

    <a href="javascript:;" id="left"> <a href="javascript:;" id="right"> <li><img src="images/27.jpg" /> <li><img src="images/27.jpg" /> <!-- 更多图片项 --> ``` ##### 2. CSS样式设计 为了...

    【JavaScript源代码】js实现水平和竖直滑动条.docx

    JavaScript 源代码实现水平和竖直滑动条 在网页设计中,滑动条是一种常见的交互元素,用于用户在有限的空间内浏览或调整内容。本文将详细介绍如何使用纯 JavaScript 来实现一个基本的水平和竖直滑动条功能。 首先...

    【JavaScript源代码】原生JS实现京东查看商品点击放大.docx

    var x = event.clientX - small.offsetLeft - (mask.offsetWidth / 2); var y = event.clientY - small.offsetTop - (mask.offsetHeight / 2); if (x ) x = 0; if (y ) y = 0; if (x > small.offsetWidth - ...

    基于js中style.width与offsetWidth的区别(详解)

    在JavaScript中,`style.width` 和 `offsetWidth` 都是用来获取或设置HTML元素的宽度,但它们之间存在显著的差异。理解这些差异对于精确地操纵网页元素的布局至关重要。 首先,`style.width` 属性主要用于获取或...

    js取得DIV的top,left,width,height值.doc

    在JavaScript中,获取DOM元素(如DIV)的`top`, `left`, `width`, `height`等属性值是常见的需求,这些属性可以帮助我们精确地控制页面元素的位置和大小。以下是一些关于如何获取这些值以及相关知识的详细解释: 1....

    浅析offsetLeft,Left,clientLeft之间的区别

    在JavaScript和Web开发中,了解DOM元素的定位属性至关重要,特别是`offsetLeft`, `left`, 和`clientLeft`之间的区别。这些属性可以帮助开发者精确地控制和计算元素在页面上的位置和大小。 首先,`offsetLeft`是元素...

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

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

Global site tag (gtag.js) - Google Analytics