详解html中 offsetTop、clientTop、scrollTop、offsetTop 的各属性
观看更佳：— 传送门 —
scrollHeight：获取对象的滚动高度 — 传送门
scrollLeft：设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 — 传送门
scrollTop：设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 — 传送门
scrollWidth：获取对象的滚动宽度 — 传送门
offsetHeight：获取对象相对与版面或由父坐标offsetParent属性指定的父坐标的高度 —传送门
offsetLeft：获取对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置 —传送门
offsetTop：获取对象相对于版面或由offsetTop属性指定的父坐标的计算顶端位置 —传送门
event.clientX ：相对文档的水平坐标
event.clientY：相对文档的垂直坐标
event.offsetX：相对容器的水平坐标
event.offsetY：相对容器的垂直坐标
document.documentElement.scrollTop：直方向滚动的值
event.clientX+documentElement.scrollTop：相对文档的水平坐标+垂直方向滚动的量
这里是JavaScript中建造迁移转变代码的常用属性
网页可见区域宽：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
图示：
假设obj为某个HTML控件。
obj.offsetTop指obj间隔上方或上层控件的地位，整型，单位像素
obj.offsetLeft指obj间隔左方或上层控件的地位，整型，单位像素
obj.offsetWidth指obj控件自身的宽度，整型，单位像素
obj.offsetHeight指obj控件自身的高度，整型，单位像素
我们对前面提到的“上方或上层”与“左方或上层”控件作个申明
例如：
<div id="tool"><input type="button" value="提交"><input type="button" value="重置">
</div>
“提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的间隔，因为距其上边比来的是 “tool” 层的上边框。
“重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的间隔，因为距其上边比来的是 “tool” 层的上边框。
“提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的间隔，因为距其左边比来的是 “tool” 层的左边框。
“重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的间隔，因为距其左边比来的是“提交”按钮的右边框。
具体结合请看：—传送门—
以上属性在 FireFox 中也有效。
题目1：offsetTop 与 style.top 的差别
筹办常识：offsetTop、offsetLeft、offsetWidth、offsetHeight
我们知道 offsetTop 可以获得 HTML 元素间隔上方或外层元素的地位，style.top 也是可以的，二者的差别是：
一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
二、offsetTop 只读，而 style.top 可读写。
三、若是没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样事理。
题目2：clientHeight、offsetHeight和scrollHeight
我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的申明，这里说的是 document.body，若是是 HTML 控件，则又有不合，
这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。
详解 javascript中offsetleft属性的用法 转载 2015-11-11 投稿:mrr 我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ... 前言:上篇详解js中构造流程图的核心技术JsPlumb介绍了下JsPlumb在浏览器里面画流程图的效果展示,以及简单的JsPlumb代码示例.这篇还是接着来看看各个效果的代码说明. 一.设置连线的样式 ... 详解OpenCV中的Lucas Kanade稀疏光流单应追踪器 1. 效果图 2. 源码 参考 这篇博客将详细介绍OpenCV中的Lucas Kanade稀疏光流单应追踪器. 光流是由物体或相机的运动 ... 详解python中的文件与目录操作 一 获得当前路径 1.代码1 >>>import os >>>print('Current directory is ',os. ... 这篇文章主要为大家详解python3中ascii与Unicode使用的相关资料,需要的朋友可以参考下# Auther: Aaron Fan ''' ASCII:不支持中文,1个英文占1个字节 Unic ... 本篇文章介绍了详解PHP中foreach的用法和实例,详细介绍了foreach的用法,感兴趣的小伙伴们可以参考一下. 在PHP中经常会用到foreach的使用,而要用到foreach,就必须用到数组. ... 文件打开方式 当我们用open()函数去打开文件的时候,有好几种打开的模式. 'r'->只读 'w'->只写,文件已存在则清空,不存在则创建. 'a'->追加,写到文件末尾 'b'- ... 本文主要介绍了Python中list[::-1]的几种用法,分享给大家,具体如下: s = "abcde" list的[]中有三个参数,用冒号分割 list[param1:para ... 先看一段synchronized 的详解: synchronized 是 java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码. 一.当两个并 ... namedtuple是Python中存储数据类型,比较常见的数据类型还有有list和tuple数据类型.相比于list,tuple中的元素不可修改,在映射中可以当键使用. namedtuple: na ...详解html中 offsetTop、clientTop、scrollTop、offsetTop 的各属性相关推荐
最新文章
热门文章