一、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操作获取元素周边大小的更多相关文章

  1. JavaScript的DOM操作获取元素的大小

    通过 style 内联获取元素的大小 需要注意的是style 获取只能获取到行内 style 属性的 CSS 样式中的宽和高,如果有获取:如果没有则返回空. <!DOCTYPE html> ...

  2. JavaScript的DOM操作获取元素实际大小

    clientWidth 和 clientHeight 这组属性可以获取元素可视区的大小,可以得到元素内容及内边距所占据的空间大小. 返回了元素大小,但没有单位,默认单位是 px,如果你强行设置了单位, ...

  3. javascript的DOM操作获取元素

    一.document.getElementById()    根据Id获取元素节点 <div id="div1"> <p id="p1"> ...

  4. dom操作------获取元素的若干方法

    // 1,getElementById:返回元素节点document.getElementById(); // 2,getElementsByClassName:返回HTMLCollection对象( ...

  5. 第一百一十六节,JavaScript,DOM操作样式

    JavaScript,DOM操作样式 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...

  6. Python之路day13 web 前端(JavaScript,DOM操作)

    参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容 ...

  7. 第一百一十五节,JavaScript,DOM操作表格

    JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...

  8. 网站开发综合技术 三 JavaScript的DOM操作

    第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 ...

  9. Javascript的DOM操作 - 你真的了解吗?

    摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...

随机推荐

  1. C学习笔记(2)--指针

    一.多文件结构总结 1.子源文件里面包含自己对应的头文件 2.无论是何源文件调用库函数,都需要包含该库函数的声明所在的头文件 3.头文件又叫接口文件,.c对数据和函数进行封装和包含, .h就是.c对外 ...

  2. 【清北学堂 】Day 4 总结

    忙(tui)了这么多天,终于有时间认(sui)真(bian)做做总结了 随便开始:(反正也没听 一:读入输出优化 1 输入优化 <1>快读    废话不多说上代码 inline int r ...

  3. Java基础教程(10)--类

    一.声明类   你已经见过了以如下方式定义的类: class MyClass { // field, constructor, and method declarations }   上面是声明类的最 ...

  4. 【转】maven profile实现多环境打包

    作为一名程序员,在开发的过程中,经常需要面对不同的运行环境(开发环境.测试环境.生产环境.内网环境.外网环境等等),在不同的环境中,相关的配置一般不一样,比如数据源配置.日志文件配置.以及一些软件运行 ...

  5. finally 的作用是什么?

    在java中finally首先必须使用在所有catch的最后位置, 无论是否抛出异常,finally代码块总是会被执行.就算是没有catch语句同时又抛出异常的情况下,finally代码块任然会被执行 ...

  6. python 字符串居中

    下面的代码可以让字符串居中,左对齐和右对齐,字符串长度设置为50,居中后左右补充空格,右对齐会在左侧补充空格 string1 = "Now I am here." print( s ...

  7. koa 中,中间件异步与同步的相关问题

    同步中间件很容易理解,如以下代码: const Router = require('koa-router') , koa = new Router({ prefix: '/koa' }) , fs = ...

  8. settimeout、setinterval区别和相互模拟

    前几天翻书,看到“避免双重求值”一节时有提到settimeout().setinterval() 建议传入函数而不是字符串以作为第一个参数,所以这里总结一下settimeout()和setinterv ...

  9. android入门学习-天气预报app(一)

    引言 学习<android第一行代码>根据书本开发的天气预报app,主要用于熟练操作android开发(android studio3.0平台). 今天主要分享一下从服务器上获取天气信息, ...

  10. EF增删查改基类

    /// <summary> /// EF DAL CURD基类 /// </summary> /// <typeparam name="T">& ...