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):包含滚动内容的元素的大小;
相关推荐
-
JavaScript获取DOM元素的11种方法总结
在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过): 1. 通过顶层document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同i
-
JS动态创建DOM元素的方法
本文实例讲述了JS动态创建DOM元素的方法.分享给大家供大家参考.具体如下: 近日,因工作需要,需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘: /* 动态创建DOM元素的相关函数支持 */ /* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; }
-
JS选取DOM元素的简单方法
摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 今天试了下各种选取元素的方法的速度,用原生的方法比jQuery要快差不多8倍,IE8是最慢的,IE9的速度差不多是IE8的3倍,Chrome的表现最好,其次是Firefox) 选取文档元素的方法: 1.通过ID选取元素(getElementById) 1)使用方法:document.getElemen
-
JavaScript DOM元素尺寸和位置
一 获取元素的CSS大小 1.通过style内联获取元素的大小 复制代码 代码如下: var box = document.getElementById('box'); // 获得元素; box.style.width; // 200px; box.style.height; // 200px; // PS:style获取只能取到行内style属性的CSS样式中
-
JavaScript DOM元素常见操作详解【添加、删除、修改等】
本文实例讲述了JavaScript DOM元素常见操作.分享给大家供大家参考,具体如下: DOM概念 DOM(Document Object Model):文档对象模型. 通过开发者工具的Elements标签页可以查看 通过开发者工具的Sources标签页也可以观察到整个文档是有一系列节点 整个文档是由一系列节点对象组成的一棵树. 节点(Node)包括元素节点(1).属性节点(2).文本节点(3)(1..2..3..代表节点类型)_ var th1= document.getElementByI
-
JQuery获取元素尺寸、位置及页面滚动事件应用示例
本文实例讲述了JQuery获取元素尺寸.位置及页面滚动事件应用.分享给大家供大家参考,具体如下: 获取元素尺寸 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://libs.baidu.com/jquery/2.0.0/jqu
-
JS中获取 DOM 元素的绝对位置实例详解
在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien
-
Vue实现DOM元素拖放互换位置示例
目录 一.拖放和释放 二.可拖拽属性 三.DataTransfer 3.1 属性 3.2 方法 四.DataTransferItem 4.1 属性 4.2 方法 五.DataTransferItemList 六.Event事件 七.实例 7.1 html代码 7.2 JS代码 一.拖放和释放 HTML 拖放接口使得 web 应用能够在网页中拖放文件.这里将介绍了 web 应用如何接受从底层平台的文件管理器拖动DOM的操作. 拖放的主要步骤是为 drop 事件定义一个释放区(释放文件的目标元素)
-
Javascript Dom元素获取和添加详解
1.Dom元素的获取 document.getElementById():通过id获取一个Dom元素 document.getElementsByClassName():通过class名字获取一个或多个Dom元素(伪数组) document.getElementsByTagName():通过标签名字获取一个或多个Dom元素(伪数组) document.querySelector():获取指定 CSS 选择器的一个元素 document.querySelectorAll():获取指定 CSS 选择
-
JavaScript获取元素尺寸和大小操作总结
一.获取元素的行内样式 复制代码 代码如下: var obj = document.getElementById("test"); alert(obj.height + "\n" + obj.width); // 200px 200px typeof=string只是将style属性中的值显示出来 二.获取计算后的样式 复制代码 代码如下: var obj = document.getElementById("test"); var style
-
用JavaScript获取DOM元素位置和尺寸大小的方法
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript代码,我们需要了解一些基本知识. 基础概念 为了方便理解,我们需要了解几个基础概念,每个HTML元素都有下列属性 offsetWidth clientWidth scrollWidth offsetHeight clientHeight scrollHeight offsetLeft clientL
-
javascript实现dom元素可拖动
摘要: 最近在项目中要做一个图片预览的功能,这时候会遇到用户上传很大的图片,已经超出视图界面.最终决定做一个在固定宽和高的位置,用户可以拖动图片查看.所以自己就写了一个支持ie5+,chrome,Firefox,opera等浏览器的可拖动dom元素的插件. 实现这个功能所需要的知识点不多,如下: 1.js中element.style.left style.left返回的变量是个字符串,是个可改变量 js中element.offsetLeft offsetLeft返回的是个int类型,不可改变量(
-
获取dom元素那些讨厌的位置封装代码
介绍 解决各个浏览器下 获取dom 元素的 位置 兼容性 ie 6 7 8 firefox 3.6 chrome 4.0 目前只测试了这几个浏览器 作者 Jelle · lu QQ:271412542 Email:idche@qq.com blogs:http://www.cnblogs.com/idche/ 源码说明 jquery 源码给我很大帮助,也用到一个叫 布鲁斯 · 李 的同学的源码,当然更多资源来源于网络. 功能说明 // jelle(elem) 对象 elem传递对象ID 或者 d