假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素。

obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,整型,单位像素。

obj.offsetWidth 指 obj 控件自身的绝对宽度,不包括因 overflow 而未显示的部分,也就是其实际占据的宽度,整型,单位像素。

obj.offsetHeight 指 obj 控件自身的绝对高度,不包括因 overflow 而未显示的部分,也就是其实际占据的高度,整型,单位像素。

我们对前面提到的 offsetParent 作个说明。

offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。offsetTop 与 offsetParent 很复杂,不同浏览器有不同解释,浮动一下解释又不同了,所以我们一般只要理解通过二者可以获得控件在浏览器中的绝对位置即可。

以上属性在 FireFox 中也有效。

另外:我们这里所说的是指 HTML 控件的属性值,并不是 document.body,document.body 的值在不同浏览器中有不同解释(实际上大多数环境是由于对 document.body 解释不同造成的,并不是由于对 offset 解释不同造成的),点击这里查看不同点。

这几个参数来制作图片的滚动,文字的滚动

网页可见区域宽: 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;
------------------------------------------------------------------------------------------------------
来源于:http://www.cnblogs.com/rixinren/archive/2010/04/25/1720680.html

offsetTop、offsetLeft、offsetWidth、offsetHeight的用法的更多相关文章

  1. offsetTop offsetLeft offsetWidth offsetHeight

    document // Html 的容器对象. document.documentElement //html 对象 document.body // body 对象 $(document.docum ...

  2. 关于offsetWidth,offsetHeight,offsetTop,offsetLeft和二维数组的声明

    offsetWidth,offsetHeight,offsetTop,offsetLeft 为只读状态,返回的值是int形式 只读形式即不能通过修改其值的大小. 想要修改某元素的这些值的大小(widt ...

  3. js的offsetWidth,offsetHeight,offsetLeft,offsetTop

    js的offsetWidth,offsetHeight,offsetLeft,offsetTop

  4. JavaScript--clientX,clientY、pageX,pageY、offsetLeft,offsetTop/offsetWidth,offsetHeight、scrollLeft,scrollTop/scrollWidth,scrollHeight、clientHeight,clientWidth区别

    /*在事件的内部console.dir(event)*/ /** * 事件对象event * clientX/clientY 获取鼠标基于浏览器窗口(可视区域的坐标位置)全兼容 * * pageX/p ...

  5. JS中的offsetWidth/offsetHeight/offsetTop/offsetLeft、clientWidth/clientHeight/clientTop/clientLeft、scrollWidth/scrollHeight/scrollTop/scrollLeft

    这是一组非常容易弄混的参数!都是描述某个盒子元素的宽度.高度以及上或左的距离偏移量. 1. offsetWidth / offsetHeight(不包括外边距) offsetWidth:返回元素的宽度 ...

  6. style设置/获取样式的问题 和 offsetWidth/offsetHeight的问题

    style设置/获取样式的问题:1.js通过style方法    --加样式:加的是行间样式 oDiv.style.width="20"+'px';    --取样式:取得是行间样 ...

  7. JS获取元素的宽高以及offsetTop,offsetLeft等的属性值

    基本介绍 $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj ...

  8. JS基础篇--JS获取元素的宽高以及offsetTop,offsetLeft等的属性值

    $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj).wid ...

  9. offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别

    offsetWidth/offsetHeight返回值包含content + padding + border,效果与e.getBoundingClientRect()相同 clientWidth/c ...

随机推荐

  1. 2.Java面向对象编程三大特性之继承

    在<Think in Java>中有这样一句话:复用代码是java众多引人注目的功能之一.但要想成为极具革命性的语言,仅仅能够复用代码并对其加以改变是不够的,他还必须能够做更多的事情.复用 ...

  2. bootstrap手风琴折叠

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  3. Maven的插件管理

    <pluginManagement> 这个元素和<dependencyManagement>相类似,它是用来进行插件管理的. 在我们项目开发的过程中,也会频繁的引入插件,所以解 ...

  4. LED点阵书写显示

    LED点阵书写显示屏   摘要:随着时代的发展,数字电子技术已经普及到我们生活,工作,科研,各个领域,而LED显示以其组构方式灵活.显示稳定.功耗低.寿命长.技术成熟.成本低廉等特点在车站.证券所.运 ...

  5. django创建分页

    前台html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. caffe 每层结构

    如何在Caffe中配置每一个层的结构 最近刚在电脑上装好Caffe,由于神经网络中有不同的层结构,不同类型的层又有不同的参数,所有就根据Caffe官网的说明文档做了一个简单的总结. 1. Vision ...

  7. 完美融合 nextjs 和 antd

    相信大家在使用nextjs的时候,难免遇到一些坑.其实可能大部分原因在于 nextjs 做了很多封装,我们可能不能第一时间搞清楚包括它相关的所有配置,比如其中的webpack配置.我前面也写过 SSR ...

  8. JS学习笔记9_JSON

    1.JSON概述 JavaScript Object Natation,js对象表示法,(像XML一样)是一种数据格式,它与js有相同的语法形式 P.S.一点小历史:JSON之父是道格拉斯,<J ...

  9. AjaxResult

    package com.sprucetec.tms.utils; /** * AjaxReturn * * @author Yinqiang Du * @date 2016/7/12 */import ...

  10. mysql创建账号及管理权限

    mysql创建账号及管理权限 0.mysql版本8.0.15,服务器版本:RHEL 6.5 1.创建用户名密码 mysql> use mysql; mysql> create user ' ...