类选项html 最后无距离,各种距离 一览无遗
offsetLeft,Left,clientLeft的区别
假设 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 解释不同造成的)
我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,style.top 也是可以的,二者的区别是:
一、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。
二、offsetTop 只读,而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。
offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。
clientHeight大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。
offsetHeightIE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。
scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。
简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同,只是把高度换成宽度即可。
说明以上基于 DTD HTML 4.01 Transitional,如果是 DTD XHTML 1.0 Transitional 则意义又会不同,在 XHTML 中这三个值都是同一个值,都表示内容的实际高度。新版本的浏览器大多支持根据页面指定的 DOCTYPE 来启用不同的解释器
scrollTop 是“卷”起来的高度值,示例:
var p = document.getElementById("p");
p.scrollTop = 10;
由于为外层元素 p 设置了 scrollTop,所以内层元素会向上卷,这卷起来的部分就是 scrollTop。
scrollLeft 也是类似道理。
我们已经知道 offsetHeight 是自身元素的宽度,而 scrollHeight 是内部元素的绝对宽度,包含内部元素的隐藏的部分。上述中 p 的 scrollHeight 为 300,而 p 的 offsetHeight 为 100。
scrollWidth 也是类似道理。
IE 和 FireFox 全面支持,而 Netscape 8 和 Opera 7.6 不支持 scrollTop、scrollLeft(document.body.scrollTop、document.body.scrollLeft 除外)。
1.clientHeight, clientWidth:
这两个属性大体上显示了元素内容的象素高度和宽度.理论上说这些测量不考虑任何通过样式表加入
元素中的页边距,边框等.
2.clientLeft,clientTop:
这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0.
3.scrollLeft,scrollTop:
如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素.
对于不可以滚动的元素,这些值总是0.
4.scrollHeight,scrollWidth:
不管有多少对象在页面上可见,他们得到的是整体.
5.style.left:
定位元素与包含它的矩形左边界的偏移量
6.style.pixelLeft:
返回定位元素左边界偏移量的整数像素值.因为属性的非像素值返回的是包含单位的字符串,例如,30px. 利用这个属性可以单独处理以像素为单位的数值.
7.style:posLetf:
返回定位元素左边界偏移量的数量值,不管相应的样式表元素指定什么单位.因为属性的非位置值返回的是包含单位的字符串,例如,1.2em
top,pixelTop,posTOp这几个类比就行了.
LEFT: 为从左向右移的位置,即挂件距离屏幕左边缘的距离;
clientLeft 返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离
offsetLeft 返回对象相对于父级对象的布局或坐标的left值,就是以父级对象左上角为坐标原点,向右和向下为X、Y轴正方向的x坐标
pixelLeft 设置或返回对象相对于窗口左边的位置
scrollWidth 是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)。
clientWidth 是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。
offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。
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
(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width
clientwidth:是元素的可见宽度。等于padding+width
scrollwidth:是元素的宽度且包括滚动部分。
offsetLeft:Html元素相对于自己的offsetParent元素的位置
scrollLeft:返回和设置当前横向滚动务的坐标值
οnclick="alert('offsetLeft:'+this.offsetLeft)">
function move()
{
var d=document.getElementById("d")
a=eval(20)
d.scrollLeft+=a
}
保存为网页,运行一下,点按钮,滚动条移动
点击div,先弹出b相对于a的位置,再弹出a相对于窗口的位置
类选项html 最后无距离,各种距离 一览无遗相关推荐
- *基于类平衡自我训练的无监督域自适应用于语义分割
基于类平衡自我训练的无监督域自适应用于语义分割 摘要:最近的深度网络实现了最先进的性能在各种语义分割任务中.尽管有这样的进步,但是这些模型在现实世界中面临挑战,它们存在很大的差别在已标签训练/源文件和 ...
- ML:图像数据、字符串数据等计算相似度常用的十种方法(余弦相似性、皮尔逊、闵可夫斯基距离/曼哈顿距离/欧氏距离/切比雪夫距离、马氏距离、汉明距离、编辑距离、杰卡德相似系数、相对熵/KL散度、Helli
ML:图像数据.字符串数据等计算相似度常用的十种方法(余弦相似性.皮尔逊.闵可夫斯基距离/曼哈顿距离/欧氏距离/切比雪夫距离.马氏距离.汉明距离.编辑距离.杰卡德相似系数.相对熵/KL散度.Helli ...
- elasticsearch geo DSL 和API对比学习-矩形/多边形/距离/距离排序/距离分段聚合/geo_shape内含-相交-相离
直接上代码,包括多种geo相关查询===>>>矩形/多边形/距离/距离排序/距离分段聚合/geo_shape内含-相交-相离 @RunWith(SpringRunner.class) ...
- 有趣现象:同一个java文件中有2个类,一个public,一个无类修饰符,各有一个main函数,谁在前先执行谁!
发现一有趣现象:同一个java文件中有2个类,一个public,一个无类修饰符,个有一个main函数,谁在前先执行谁! //Detergent.java //Class:Detergent,Clean ...
- 雷达导论PART-III.9 测量距离与距离分辨
雷达导论专栏总目录链接: https://blog.csdn.net/lightninghenry/article/details/111316938 今天我们讲第15章--测量距离与距离分辨.本章目 ...
- wordpress菜单显示css字体,WordPress菜单CSS类选项设置方法
WordPress菜单CSS类选项设置方法,选项设置 WordPress菜单CSS类选项设置方法 易采站长站,站长之家为您整理了WordPress菜单CSS类选项设置方法的相关内容. WordPres ...
- vue滚动条事件(获取滚动条距离底部距离)
网上大部分vue的滚动条操作是监听dom实现,我是用@scroll实现 首先有滚动条的div一定要设固定高度,然后overflow:auto;出现滚动条 passive是使滚动更加流畅,减少卡顿 &l ...
- 距离度量的方法,欧式距离,切比雪夫距离、马氏距离、巴氏距离,曼哈顿距离
距离度量的方法有欧式距离,切比雪夫距离.马氏距离.巴氏距离,曼哈顿距离等: 用欧氏距离(也称欧几里德度量),高中所学的两点距离公式就是欧氏距离在二维空间上的公式,也就是欧氏距离的n的值为2的情况. 二 ...
- 详解曼哈顿距离欧式距离切比雪夫距离
详解曼哈顿&欧式距离&切比雪夫距离 曼哈顿距离 基本概念:出租车几何或曼哈顿距离(Manhattan Distance)是由十九世纪的赫尔曼·闵可夫斯基所创词汇 ,是种使用在几何度量空 ...
最新文章
- SubLime Text 3 配置SublimeREPL来交互式调试程序
- 【转】iPhone4清理垃圾文件的方法
- 阿里python面试题和答案_阿里的python大牛总结10条Python面试题陷阱,中招了吗?...
- 【CDH】ClouderaManager集群报警,堆转储目录/tmp 或日志目录/var/log 可用空间小于 5.0 吉字节
- java 在已有的so基础上封装jni_webshell中的分离免杀实践java篇
- warframe怒焚者结合目标_【虚荣盒子】设计目标和功能规划
- 可疑文件_鉴定文件是不是病毒木马的可靠方法 | 免费快速精准
- windows 运行linux c++,Visual studio中使用C++的Linux 开发
- 做购物车系统时利用到得几个存储过程
- 【leetcode】刷题暂告一个段落
- Scikit-learn:主要模块和基本使用方法
- 我的求职之路——首战:毕马威(KPMG)笔试
- 如何批量提取多个 PDF 文档中的图片
- 1 0.99999的悖论_物理学四大神兽:你能追上乌龟吗?无穷大到底是多大?(1)...
- stm32中的“hello world”
- 计算机应用基础(专)【6】
- RecyclerView之利用ItemDecoration实现万能分割线
- oracle e-bussiness 简称
- 从全球最大同性交友网站抄了一份不一样的2048小游戏
- 计算机现在发展状况,浅谈计算机的发展状况
热门文章
- 李争——一个骨子里是极客的程序员
- 如何在.NET Core控制台程序中使用依赖注入
- 要用Identity Server 4 -- OAuth 2.0 超级简介
- SOA对微服务的残余影响
- asp.net core mvc View Component 应用
- RabbitMQ系列教程之一:我们从最简单的事情开始!Hello World
- CoreCLR源码探索(三) GC内存分配器的内部实现
- 第二章指南(4.2)添加 Controller
- [转]IIS7全新管理工具AppCmd.exe的命令使用
- ArcGIS 10.5河流水系左斜体样式经典设置方法