JavaScript DOM元素尺寸和位置_基础知识
一 获取元素的CSS大小
1.通过style内联获取元素的大小
var box = document.getElementById('box'); // 获得元素;
box.style.width; // 200px;
box.style.height; // 200px;
// PS:style获取只能取到行内style属性的CSS样式中的宽和高,如果有,则获取;如果没有则返回空;
2.通过计算获取元素的大小
var style = window.getComputedStyle ? window.getComputedStyle(box,null) : null || box.currentStyle;
style.width; // 200px;
// PS:通过计算获取元素的大小,无关是行内/内联或链接,它返回经过计算后的结果;
// 如果本身设置大小,它会返回元素的大小;如果本身没有设置,非IE会返回默认的大小,IE会返回auto;
3.通过CSSStyleSheet对象中的cssRules(或rules)属性获取元素的大小;
var sheet = document.styleSheets[0]; // 获取link或style;
var rule = (sheet.cssRules || sheet.rules)[0]; // 获取第一条规则;
rule.style.width; // 200px;
PS:cssRules只能获取到内联和链接样式的宽和高,不能获取到行内和计算后的样式;
总结:以上三种CSS获取元素大小的方法,只能获取元素的CSS大小,却无法获取元素本身实际的大小;比如加上内边距/滚动条/边框之类的;
二 获取元素实际大小
1.clientWidth和clientHeight
这组属性可以获取元素可视区的大小,包含元素内容及内边距所占据的空间大小;
box.clientWidth; // 200;
PS:返回了元素大小,但没有单位,默认单位是px;
PS:对于元素的实际大小,clientWidth和clientHeight理解如下:
1.元素增加边框,无变化,200;
2.元素增加外边框,无变化,200;
3.增加滚动条,最终值=原本大小-滚动条大小;184;
4.增加内边距,最终值=原本大小 内边距大小;220;
PS:如果没有设置任何CSS的width和height,那么非IE会算上滚动条和内边距的计算后的大小;而IE则返回0;
2.scrollWidth和scrollHeight
这组属性可以获取没有滚动条的情况下,元素内容的总高度;
box.scrollWidth;
// PS:返回了元素大小,默认单位是px;如果没有设置任何CSS的width和height,它会得到计算后的宽度和高度;
3.offsetWidth和offsetHeight
这组属性可以返回元素实际大小,包含边框/内边距和滚动条;
box.offsetWidth; 200
PS:返回了元素大小,默认单位是px;如果没有设置任何CSS的width和height,它会得到计算后的宽度和高度;
PS:对于元素的实际大小,理解如下:
1.增加边框,最终值=原本大小 边框大小;220;
2.增加内边距,最终值=原本大小 内边距大小;220;
3.增加外边据,无变化;
4.增加滚动条,无变化,不会减小;
PS:对于元素大小的获取,一般是块级(block)元素并且已设置了CSS大小的元素较为方便;
三 获取元素周边大小
1.clientLeft和clientTop
// 这组属性可以获取元素设置了左边框和上边框的大小;
box.clientLeft; // 获取左边框的宽度;
2.offsetLeft和offsetTop(偏移量)
// 这组属性可以获取当前元素边框相对于父元素边框的位置;
box.offsetLeft; // 50;
// PS:获取元素当前相对于父元素的位置,最好将它设置为定位position:absolute;
// PS:加上边框和内边距不会影响它的位置,但加上外边据会累加;
box.offsetParent; // 得到父元素;
// PS:offsetParent中,如果本身父元素是<body>,非IE返回body对象,IE返回html对象;
// 如果两个元素嵌套,如果上级父元素没有使用定位position:absolute,那么offsetParent将返回body或html对象;
// 如果说在很多层次里,外层已经定位,获取任意一个元素距离页面上的位置,可以不停的向上回溯获取累加来实现;
box.offsetTop+box.offsetParent.offsetTop; // 只有两层的情况下;
// 如果多层的话,就必须使用循环或递归;
function offsetLeft(element){
var left = element.offsetLeft; // 得到第一层距离;
var parent = element.offsetParent; // 得到第一个父元素;
while(parent !== null){ // 判断如果还有上一层父元素;
left += parent.offsetLeft; // 将得到的距离累加;
parent = parent.offsetParent; // 将父元素也回溯;
} // 然后循环;
return left; // 得到最终距离;
}
3.scrollTop和scrollLeft
// 这组属性可以获取被滚动条隐藏的区域大小,也可设置定位到该区域;
box.scrollTop; // 获取滚动内容上方的位置;
// 设置滚动条滚动到最初始的位置;
function scrollStart(element){
if(element.scrollTop != 0){
element.scrollTop = 0;
}
}四 getBoundingClientRect()方法
// 这个方法返回一个矩形对象,包含四个属性:left/top/right和bottom;
// 分别表示元素各边与页面上边和左边的距离;
var box = document.getElementById('box');
alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离;
alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离;
alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离;
alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离;
// PS:IE/Firefox/Opera/Chrome/Safari都支持;
// 但在IE中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出两个像素;
document.documentElement.clientTop; // 非IE为0,IE为2;
document.documentElement.clientLeft; // 非IE为0,IE为2;
// 兼容getBoundingClientRect()
function getRect(element){
var rect = element.getBoundingClientRect();
var top = document.documentElement.clientTop;
var left = document.documentElement.clientLeft;
return {
top:rect.top-top, // 元素上边距-页面的上边距(0-0或2-2);
bottom:rect.bottom-top,
left:rect.left-left, // 元素左边距-页面的左边距(0-0或2-2);
right:rect.right-left
}
};五 小结
1.偏移量(offset dimension):包括元素在屏幕上占用的所有可见的空间;
元素的可见大小由其高度和宽度决定,包括内边距/滚动条和边框;
2.客户区大小(client dimension):指的是元素内容及其内边距所占据的空间大小;
3.滚动大小(scroll dimension):包含滚动内容的元素的大小;
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
详细介绍如何在Windows 11上打开环境变量设置
Dec 30, 2023 pm 06:07 PM
环境变量功能是系统中的配置程序运行必备工具，但是在最新的win11系统中还有许多的用户不知道怎么设置打开，下面就给你们带来了win11环境变量打开位置详细介绍，快来一起学习操作一下吧。win11环境变量在哪：1、首先输入“win+R”，打开运行框。2、然后在里面输入命令：controlsystem。3、在打开的系统信息界面中，选择左侧菜单的“高级系统设置”。4、随后在打开的“系统属性”窗口选择下方的“环境变量”选项。5、最后在打开的环境变量中，即可根据需求进行相关的设置。
Win11的启动路径以及如何打开它
Jan 03, 2024 pm 11:13 PM
每一个Windows系统都有一个启动路径，如果你在其中添加了文件或软件，就会在开机的时候打开它。不过不少朋友不知道win11启动路径在哪里，其实我们只需要进入C盘的对应文件夹就可以了。win11启动路径：1、双击打开“此电脑”2、直接将该路径“C:\ProgramData\Microsoft\Windows\StartMenu\Programs\Startup”粘贴进路径框。3、这里就是win11启动路径了，如果我们要开机打开文件就可以将文件放进来。4、如果你根据这个路径进不来，可能是被隐藏了。
windows10凭证管理器在哪里
Jul 09, 2023 am 10:09 AM
凭证管理器是用户用于管理web凭证和Windows凭据的一个作用，可是很多用户还不清楚windows10凭证管理器在哪里。其实凭证管理器就在操作面板上，大家在打开控制面板以后记得将查看方法改成小图标，那样就能见到凭证管理器了，点击查看就能查看各类信息了，如果想要查看大量，就需要输入账户密码。windows10凭证管理器在哪里：1、在系统中打开控制面板，点击右上角的查看方法，将类型转换成小图标。2、以小图标的方式查看以后，点击“凭证管理器”。3、进来凭证管理器以后，能够看见有关作用的介绍，主要用于
星穹铁道克劳克影视乐园折纸小鸟位置
Mar 27, 2024 pm 11:51 PM
星穹铁道克劳克影视乐园总共有20只折纸小鸟，有很多玩家不知道克劳克影视乐园折纸小鸟在哪，小编已经把每只折纸小鸟位置全部都总结出来了，帮助大家进行寻找，具体内容一起来看看这篇克劳克影视乐园折纸小鸟位置最新汇总。崩坏星穹铁道攻略大全星穹铁道克劳克影视乐园折纸小鸟位置1、克劳克影视乐园一层2、克劳克影视乐园二层
了解pip安装包存储的位置和结构
Jan 18, 2024 am 08:23 AM
深入了解pip安装的包存放位置，需要具体代码示例pip是Python语言常用的包管理工具，用于方便地安装、升级和管理Python包。在使用pip安装包时，它会自动从PyPI（Python包索引）下载对应的包文件，并将其安装到指定的位置。那么，pip安装的包究竟存放在哪里呢？这是很多Python开发者都会遇到的问题。本文将深入探讨pip安装的包存放位置，并提供
win11关机位置
Jan 10, 2024 am 09:14 AM
如果我们要长时间离开电脑，那么最好将电脑关机保护它，那么win11关机在哪里呢，其实一般来说只要打开开始菜单，在其中就可以找到关机按钮了。win11关机在哪里：答：在开始菜单的电源按钮里。1、首先我们点击底部任务栏的“windows徽标”打开“开始菜单”2、打开后，可以在右下角找到“电源”按钮，如图所示。3、点击电源按钮后，就能看到“关机”了，点击它就能关机。4、如果因为死机等特殊情况无法关机，那么可以直接用电脑上的“电源键”长按强制关机。
使用Apple的签入功能：iOS 17中的消息应用指南
Sep 14, 2023 pm 09:13 PM
iOS17中的Apple在“信息”中添加了一项新功能，可让您在安全回家时让亲人知道。它被称为签入，这是你如何使用它。无论你是在天黑后步行回家，还是在清晨跑步，你都可以在Apple的“信息”应用中与家人或朋友一起开始签到，让他们知道你何时安全回家。在您到达后，CheckIn会自动检测您何时在家，并通知您的朋友。当他们收到警报并且签入已结束时，您也会收到通知。如果发生意外情况并且您在途中被延误，CheckTab甚至会识别出您没有取得进展并与您一起办理登机手续，询问您是否要增加预计到达时间。如果您没有
快手发布于哪里怎么改位置？已经上传的视频怎么添加位置呢？
Mar 21, 2024 pm 06:00 PM
作为国内知名的短视频平台，快手为众多创作者提供了展示才华和分享生活的机会。在上传视频时，一些新手创作者可能会困惑于如何更改视频发布位置。本文将为您介绍快手视频发布位置的更改方法，并分享一些快手视频发布的技巧，帮助您更好地利用这个平台展示自己的作品。一、快手发布于哪里怎么改位置？1.发布界面：在快手APP中，点击“发布”按钮，进入视频发布界面。2.位置信息：在发布界面，有“位置”一栏，点击进入位置选择界面。3.更改位置：在位置选择界面，点击“定位”按钮，可以查看当前所在位置。如需更改位置，点击“位
