假设 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. 第一次Java实验

      模仿JavaAppArguments.java实例,编写一个程序,此程序从命令行接受多个数字,求和之后输出. 1.设计思路:命令行参数都是字符串,必须将其转化成数字才能相加,定义一个数组接收字符串 ...

  2. poj3929

    题意: 如上图放置的一个圆锥,告诉你从圆锥顶的洞中流出多少体积的水,求现在水面高度.. 思路: 无聊时做的一道题,实际上就是一道高数题,重积分,可惜我高数本来也不好而且还忘光了,积了很久,而且错了很多 ...

  3. shell 命令 mkdir -p

    开发中我们会遇到嵌套创建文件目录的需要,这时需要用到 mkdir -p 比如我要在本地嵌套创建 /Users/dairui/Downloads/zookeeper/dataLogDir目录 直接使用 ...

  4. Mysql 分区(range,list,hash)转载

    MySQL支持RANGE,LIST,HASH和KEY四种分区.其中,每个分区又都有一种特殊的类型.对于RANGE分区,有RANGE COLUMNS分区.对于LIST分区,有LIST COLUMNS分区 ...

  5. UITabBarItem title 和self.title设置不同的标题

    self.navigationItem.title = @"my title"; //sets navigation bar title. self.tabBarItem.titl ...

  6. mantis邮件设置

     1.cd /var/www/html/mantis     删除 config_inc.php  的$g_enable_email_notification    = OFF;    重启httpd ...

  7. uniGUI 通过SessionList操作另外的登录用户

    参照bbs,写了这个方法,检查是否有同名用户已经登录:procedure TUniMainModule.CheckSameUser(aUserLoginCode: string);var  ASess ...

  8. GitHub 教程【转】

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  9. docker - 从安装到部署一个web应用(go、java)

    一:安装docker 1.https://docs.docker.com/engine/installation/binaries/ 下载docker最新版二进制tar.gz linux下: wget ...

  10. centos部署yapi爬坑记

    前言 这几天终于完成了为期三个月的公司某个demo版的项目,在这期间和公司的后台因为API的事怼过无数次了,'我的接口没问题,是你请求的方式不对吧!'.'一定是你请求的参数不对'......诸如此类问 ...