JS HTML标签尺寸距离位置定位计算_html small 距离上一个控件距离设备-程序员宅基地

技术标签: 尺寸  document  js  html  位置  javascript  

//中当前浏览器的高度(打开IFer BUG 后,会计算减去ifer bug的高度。)。
alert(document.documentElement.scrollHeight);
alert(document.body.scrollHeight);
如果没有文档声明可以用 document.body.scrollHeight,
如果有文档声明必须用 document.documentElement.scrollHeight关于这方面的东西
兼容写法用document.documentElement.clientHeight


JS <wbr>HTML标签尺寸距离位置定位计算


四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异

网页可见区域宽: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

这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。

这四种浏览器分别为IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。

clientHeight
四种浏览器对 clientHeight 的解释都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

offsetHeight
IE、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 的解释与上面相同,只是把高度换成宽度即可。


注:以上也是转的,对自己有点参考而已,有些值要跟据页面方式而定!我用的Ajax就完全没法用上面的方法定高!

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
屏幕可用工作区宽度:window.screen.availWidth

原文出处:http://blog.sina.com.cn/s/blog_966e43000101bplb.html


在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得,很简单,很方便。
而在公司项目当中:
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原来是W3C的标准在作怪啊
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果在页面中添加这行标记的话

在IE中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
注:在IE中“可见区域”基本不认可body,而必需使用documentElement!!!!

在FireFox中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

在Opera中:
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

获取窗口高宽:
var w= document.documentElement.offsetWidth;
var h=document.documentElement.offsetHeight;


-------------------------------------------------------------------------------------------------

假设 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 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

offsetHeight
IE、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 是“卷”起来的高度值,示例:

如果为 p 设置了 scrollTop,这些内容可能不会完全显示。




由于为外层元素 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)">


保存为网页,运行一下,点按钮,滚动条移动
点击div,先弹出b相对于a的位置,再弹出a相对于窗口的位置
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/dslinmy/article/details/42265965

智能推荐

mysql全文搜索索引的字段提高搜索效率-程序员宅基地

文章浏览阅读1k次。一个SELECT查询中的LIKE语句来执行这种查询,尽管这种方法可行,但对于全文查找而言,这是一种效率极端低下的方法,尤其在处理大量数据的时候。 开发者只需要简单地标记出需要全文查找的字段,然后使用特殊的MySQL方法在那些字段运行搜索,这不仅仅提高了性能和效率(因为MySQL对这些字段做了索引来优化搜索),而且实现了更高质量的搜索,因为MySQL使用自然语言来智能地对结果评级,以去掉不相关的

计算机专业的可以做资料员工作吗,建筑资料员好不好做?-程序员宅基地

文章浏览阅读580次。原标题:建筑资料员好不好做?无论从事何种职业或者工作,都有着从不懂到懂,从新手变成一位有经验的专业人士这样一个过程,所以不懂并不可怕,只要你坚持,只要认真的学习,新手就只是暂时的代名词而已。首先来了解一下自己的行业概念: 建筑工程资料员的工作是一项集工程建设管理、档案管理知识为一体的复合专业工作,必须具备一定的建筑专业知识、档案专业知识及操作计算机建筑应用软件的能力。 随着建设的不断升温,建筑资料..._资料员是计算机专业类别里的吗

微服务-API网关-身份验证-程序员宅基地

文章浏览阅读850次。上一篇:被阿里P8面了两个小时,技术、业务有来有回......一、身份验证介绍身份验证通常是进入系统的第一道大闸,要求用户出具登录此系统的身份证明。其实在实际情况下,很多人开发的系统都没有..._api 获取网关的身份信息

WinForm中Label控件的换行显示-程序员宅基地

文章浏览阅读6.7k次。WinForm中,Label控件是最常用的了。可有时需要它的换行,只能在后台用\r\n或Environment.NewLine。原来,换行还可以通过前台界面属性设置来实现。换行主要用到AutoSize、MaximumSize和Size三个属性。添加一个Label控件,AutoSize的属性默认为True,MaximumSize的值均为0。只需要将MaximumSize的Width属性设置为

编程语言难度排名_文言文可编程乎?CMU中国大四学生:开源文言文编程语言获1万+标星...-程序员宅基地

文章浏览阅读357次。优达菌:文言文可以编程吗?近日一位卡内基梅隆大学(CMU)大四学生因开发基于文言文的编程语言小火了一把。截止本文发布前,排名 Github 项目周趋势第三(前两个是春运抢票相关)。懂编程又懂文言文,如此文理两开花,今年的年度最秀编程语言优达菌决定私自颁给文言编程了。本文由机器之心原创,已授权转载,禁止二次转载。「昔者苍颉作书,而天雨粟,鬼夜哭」,汉字的出现,诞生了世界上一个伟大的文明。而..._编程语言难度打星

搜狗违禁词屏蔽垄断关键词批量过滤工具-程序员宅基地

文章浏览阅读2.8k次。2020最新搜狗站群SEO必备违禁词过滤工具,支持在本机、拨号VPS运行使用,一键过滤被搜狗垄断屏蔽的关键词使用说明:可无需使用拨号过滤,在本机也可以可自定义大站数量一键导出为XLSX下载地址https://wws.lanzous.com/ir011eb2aif..._搜狗违禁词屏蔽垄断关键词批量过滤工具

随便推点

Point-Voxel CNN for Efficient 3D Deep Learning(PVCNN)论文翻译-程序员宅基地

文章浏览阅读1.9k次。Point-Voxel CNN for Efficient 3D Deep Learning(PVCNN)摘要我们介绍了Point-Voxel CNN(PVCNN),可进行高效,快速的3D深度学习。以前的工作使用基于体素或基于点的NN模型处理3D数据。但是,这两种方法在计算上都是低效的。基于体素的模型的计算成本和内存占用量随输入分辨率的增加而立方增长,从而使其无法扩展分辨率。对于基于点的网络,最多有80%的时间被浪费在构造稀疏数据上,这些稀疏数据的内存局部性很差,而不是实际的特征提取。在本文中,我们提出_point-voxel cnn for efficient 3d deep learning

一加9 是什么样的手机 通过流畅体验给你准确回答_一加9手机使用真实感受-程序员宅基地

文章浏览阅读101次。近期上市的一加9手机给手机消费领域萌生一些温热的暖意,同时也通过温柔一击,给市场带来一些属于新派潮流手机的新声音和新动向。刚刚上市的一加9如瀚海流星划过夜空,让市场大众看到汇聚品牌和工艺魅力的新手机实力,到底这是一款什么样的手机?品牌方表示,在流畅的体验当中,大众会感知到一加手机自身的定位、实力和推动手机发展的诚意和努力。据悉,一款手机的流畅性是属于手机竞争力的核心指标,正如一名运动员在运动场上的综合实力一般,是属于真正实用性和为自己争取得分的关键因素。而一加9手机真的能还原和提升手机的流畅度体验吗?在_一加9手机使用真实感受

pytorch: Tensor 常用操作_pytorch tensor fill-程序员宅基地

文章浏览阅读8.1w次,点赞56次,收藏371次。pytorch: Tensor 常用操作_pytorch tensor fill

centos环境搭建pptp服务器-程序员宅基地

文章浏览阅读2.1k次。pptp安装1、安装pppyum install -y ppp2、安装pptpdyum install -y pptpd3、修改/etc/pptpd.confoption /etc/ppp/options.pptpdlogwtmplocalip 192.168.11.1remoteip 192.168.11.10-1004、修改/etc/ppp/options.pptpd文件name pptpdrefuse-paprefuse-chaprefu

黑马程序员---------JAVA基础接口,多态-程序员宅基地

文章浏览阅读300次。多态:概念: 一个事物的多种形态多态前提和体现有继承关系或者实现关系 有方法重写 有父类引用指向子类对象成员访问特点方法的运行看右边,其他都看左边多态的好处提高了程序的维护性(由继承保证)提高了程序的扩展性(由多态保证)多态的弊端:父类不能访问子类的特有方法如果非要访问,向下转型(强转)向上转型从子到父父类

python实现下载任意网站所有图片_with open(f"./downloads_picture/{img_name}",'wb')-程序员宅基地

文章浏览阅读2.3k次。操作演示视频中爬取网站地址:https://www.ivsky.com/tupian/完整代码# !/user/bin/env python# -*- coding: utf-8 -*-# des: 下载任何网页的图片import reimport requestsdef download_img(): error_count = 0 success_count = 0 url = input('请输入您要下载的图片的网址:') headers _with open(f"./downloads_picture/{img_name}",'wb')

推荐文章

热门文章

相关标签