JavaScript的DOM操作获取元素周边大小
一、clientLeft 和 clientTop
这组属性可以获取元素设置了左边框和上边框的大小，目前只提供了 Left 和 Top 这组，并没有提供 Right 和 Bottom。
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById("box");
alert(box.clientLeft);
alert(box.clientTop);
}
</script>
<style type="text/css">
.aaa{
background:#ccc;
width:200px;
height:200px;
border:10px solid red;
}
</style>
</head>
<body>
<div id="box" class="aaa">测试Div</div>
</body>
二、offsetLeft 和 offsetTop
1、这组属性可以获取当前元素相对于父元素的位置。
获取元素当前相对于父元素的位置，最好将它设置为定位 position:absolute；不要用外边距，否则不同的浏览器会有不同的解释。
加上边框和内边距不会影响它的位置，但加上外边据会累加。
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById("box");
alert(box.offsetLeft); //
alert(box.offsetTop);//
}
</script>
<style type="text/css">
/*
body{
margin:50px;
}
*/
.aaa{
background:#ccc;
width:200px;
height:200px;
position:absolute;
top:50px;
left:50px;
}
</style>
</head>
<body>
<div id="box" class="aaa">测试Div</div>
</body>
2、得到父元素
offsetParent 中，如果本身父元素是<body>，非 IE6,7,8 返回 body 对象，IE 6,7,8返回 html 对象。
如果两个元素嵌套，如果上父元素没有使用定位 position:absolute，那么 offsetParent 将返回 body 对象或 html 对象。
所以，在获取 offsetLeft 和 offsetTop 时候，CSS 定位很重要。
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById("box");
alert(box.offsetParent); //得到父元素，IE6,7,8得到的是HTML跟标签，其他得到的是body标签
} </script>
<style type="text/css">
</style>
</head>
<body>
<div id="box" class="aaa">测试Div</div>
</body>
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById("box");
alert(box.offsetParent);//父元素是id为pox的那个div，如果没加定位就变成body了
alert(box.offsetTop);//
alert(box.offsetParent.offsetTop);//
}
</script>
<style type="text/css">
#box{
background:#ccc;
width:200px;
height:200px;
margin:20px; }
#pox{
position:absolute;
top:50px;
left:50px;
background:blue;
width:400px;
height:400px;
}
</style>
</head>
<body>
<div id="pox">
<div id="box" class="aaa">测试Div</div>
</div>
</body>
如果多层的话，就必须使用循环或递归。
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById("box");
alert(box.offsetParent);//父元素是id为pox的那个div，如果没加定位就变成body了
alert(offsetLeft(box)+offsetLeft(box.offsetParent));//
alert(box.offsetParent.offsetTop);//50
}
function offsetLeft(element) {
var left = element.offsetLeft; //得到第一层距离
var parent = element.offsetParent; //得到第一个父元素
while (parent !== null) { //如果还有上一层父元素left += parent.offsetLeft; //把本层的距离累加
parent = parent.offsetParent; //得到本层的父元素
} //然后继续循环
return left;
}
</script>
<style type="text/css">
#box{
background:#ccc;
width:200px;
height:200px;
margin:20px; }
#pox{
position:absolute;
top:50px;
left:50px;
background:blue;
width:400px;
height:400px;
}
</style>
</head>
<body>
<div id="pox">
<div id="box" class="aaa">测试Div</div>
</div>
</body>
三、scrollTop 和 scrollLeft
这组属性可以获取滚动条被隐藏的区域大小，也可设置定位到该区域。意思就是获取滚动条的位置（有滚动条的前提下）
box.scrollTop; //获取滚动内容上方的位置
box.scrollLeft; //获取滚动内容左方的位置
如果要让滚动条滚动到最初始的位置，那么可以写一个函数：
function scrollStart(element) {
if (element.scrollTop != 0)
element.scrollTop = 0;
}
四、getBoundingClientRect()
这个方法返回一个矩形对象，包含四个属性：left、top、right和 bottom。分别表示元素各边与页面上边和左边的距离。
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById("box");
alert(box.getBoundingClientRect().top); //元素上边距离页面上边的距离
alert(box.getBoundingClientRect().right); //元素右边距离页面左边的距离
alert(box.getBoundingClientRect().bottom); //元素下边距离页面上边的距离
alert(box.getBoundingClientRect().left); //元素左边距离页面左边的距离
}
</script>
<style type="text/css">
#box{
background:#ccc;
width:200px;
height:200px;
position:absolute;
top:50px;
left:50px;
}
</style>
</head>
<body>
<div id="box" class="aaa">测试Div</div>
</body>
IE、Firefox3+、Opera9.5、Chrome、Safari 支持，在 IE 6,7,8中，默认坐标从(2,2)开始计算，导致最终距离比其他浏览器多出两个像素，需要做个兼容。
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById("box");
alert(document.documentElement.clientTop); //IE6,7,8 为 2其他为0
alert(document.documentElement.clientLeft); //IE6,7,8 为2其他为0 alert(getRect(box).top); //元素上边距离页面上边的距离
alert(getRect(box).right); //元素右边距离页面左边的距离
alert(getRect(box).bottom); //元素下边距离页面上边的距离
alert(getRect(box).left); //元素左边距离页面左边的距离
}
function getRect(element) {
var rect = element.getBoundingClientRect();
var top = document.documentElement.clientTop;
var left = document.documentElement.clientLeft;
return {
top : rect.top - top,
bottom : rect.bottom - top,
left : rect.left - left,
right : rect.right - left
}
}
</script>
<style type="text/css">
#box{
background:#ccc;
width:200px;
height:200px;
position:absolute;
top:50px;
left:50px;
}
</style>
</head>
<body>
<div id="box" class="aaa">测试Div</div>
</body>
JavaScript的DOM操作获取元素周边大小的更多相关文章
- JavaScript的DOM操作获取元素的大小
通过 style 内联获取元素的大小 需要注意的是style 获取只能获取到行内 style 属性的 CSS 样式中的宽和高,如果有获取:如果没有则返回空. <!DOCTYPE html> ...
- JavaScript的DOM操作获取元素实际大小
clientWidth 和 clientHeight 这组属性可以获取元素可视区的大小,可以得到元素内容及内边距所占据的空间大小. 返回了元素大小,但没有单位,默认单位是 px,如果你强行设置了单位, ...
- javascript的DOM操作获取元素
一.document.getElementById() 根据Id获取元素节点 <div id="div1"> <p id="p1"> ...
- dom操作------获取元素的若干方法
// 1,getElementById:返回元素节点document.getElementById(); // 2,getElementsByClassName:返回HTMLCollection对象( ...
- 第一百一十六节，JavaScript，DOM操作样式
JavaScript,DOM操作样式 一．操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...
- Python之路day13 web 前端（JavaScript，DOM操作）
参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容 ...
- 第一百一十五节，JavaScript，DOM操作表格
JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...
- 网站开发综合技术 三 JavaScript的DOM操作
第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 ...
- Javascript的DOM操作 - 你真的了解吗?
摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...
随机推荐
- win10 uwp unix timestamp 时间戳 转 DateTime
有时候需要把网络的 unix timestamp 转为 C# 的 DateTime ,在 UWP 可以如何转换? 转换函数可以使用下面的代码 private static DateTime UnixT ...
- 3.C#基础篇-->堆和栈
一.前言 堆与栈对于理解.NET中的内存管理.垃圾回收.错误和异常.调试与日志有很大的帮助.垃圾回收的机制使程序员从复杂的内存管理中解脱出来,虽然绝大多数的C#程序并不需要程序员手动管理内存,但这并不 ...
- 关于伪分布zookeeper集群启动出错（Error contacting service. It is probably not running.）
今天在配置zookeeper伪分布集群的时候,发现竟然出错了,以前我都是在多台电脑上搭建,大家可以参考我写的Hadoop HA搭建中的zookeeper如何搭建 现在就来说一下为何会出错. 出错的原因 ...
- 前端开发实用工具-Bower的使用。
参看博客:[https://segmentfault.com/a/1190000002971135]
- 【转】关于JTA,XA，ACID
对于我们这种初学者,可能会使用spring带给我们的@Transactional,可能了解JTA,可能会使用jotm.atomikos,又会遇到一些名词XA,支持XA的数据库驱动等等诸多问题,然后就会 ...
- 从 Hadoop 1.0 到 Hadoop 2.0 ，你需要了解这些
学习大数据,刚开始接触的是 Hadoop 1.0,然后过度到 Hadoop 2.0 ,这里为了书写方便,本文中 Hadoop 1.0 采用 HV1 的缩写方式,Hadoop 2.0 采用 HV2 的缩 ...
- Laravel 多域名共享session
在网站开发中会涉及登陆的问题,在登陆的过程中为了方便用户体验,我们需要用户在主域名登陆,在其他域名下也要保持登陆状态: 在config/session.php中: 更新网站配置缓存即可
- PHP CURL库学习
基本请求步骤 : // . 初始化 $ch = curl_init(); // . 设置选项,包括URL curl_setopt($ch, CURLOPT_URL, "http://www. ...
- CSS代码缩写
盒模型代码简写 还记得在讲盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左.具体应用在margin和paddin ...
- IDEA操作maven时控制台中文乱码
windows环境下,Intellij idea12中maven操作时,控制台中文乱码问题(编译报错或者clean install时出现的其他错误描述乱码) 在cmd中mvn中文正常显示,log4j打 ...