HTML:

  <div id="parent">
    <div id="box">
      测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测      试测试测试
    </div>
  </div>

CSS:

  #parent{
    position:absolute;
    width: 400px;
    height: 400px;
    background-color: blue;

    margin: 10px;
  }
  #box{
    width: 200px;
    height: 200px;
    overflow: scroll;/**/
    background-color: pink;

    /*margin: 10px;*/
    position: absolute; /*此时的offsetTop,offsetLeft,获取的值是相对于父元素的*/
    top: 50px;
    left: 50px;

    border:10px solid red;

    padding: 10px;
    margin: 10px;/**/

  }


var box = document.getElementById("box");

1.scollTop,scollLeft获取/设置滚动条被隐藏的内容的高度/宽度  

    box.scrollTop = 100;
    // alert(box.scrollTop);
    // alert(box.scrollHeight);

  将滚动条设置为0:

    scorllStar(box);
    function scorllStar (elemnet) {
      if (box.scrollTop!=0) {
        box.scrollTop = 0;
      };
    }

2.offsetLeft 和 offsetTop 获取当前元素相对于父元素的位置

  alert(box.offsetTop);

  alert(box.offsetLeft);

  alert(box.offsetParent); // 如果没有给父元素设置position非ie浏览器会返回body对象,ie会返回object,所以要想得到具体的元素需要给              父元素设置position的值。

求子元素距离body的值:
     alert(box.offsetTop + box.offsetParent.offsetTop); // 60 子元素+父元素

如果要求多个嵌套层中的任意一个元素距离父html/body的值时,可以这样:

    alert(newOffsetTop(box));

    function newOffsetTop (elemnet) {
      var top = elemnet.offsetTop;
      var parent = elemnet.offsetParent;
      while(parent!=null){
        top += parent.offsetTop;
        parent = parent.offsetParent;
      }
    return top;
    }

    function newOffsetLeft (elemnet) {
      var left = elemnet.offsetLeft
      var parent = elemnet.offsetParent;
      while(parent!=null){
        left += parent.offsetLeft;
        parent = parent.offsetParent;
      }
    return left;
    }

3.scrollWidth, scollHeight 获取滚动内容的元素大小

  alert(box.scrollWidth); //包含padding值,但不包含margin值,如果有滚动条,会减去滚动条的宽高值

alert(box.scrollHeight); //ie7显示的高度是内容高度不是元素的本身的高度

4.clientWidth,clientHeight获取元素可视区域的大小 包含padding值,减去边框,不包含margin值

alert(box.clientWidth);
alert(box.clientHeight);

5.clientLeft,clientTop  返回元素的左边框,上边框

  alert(box.clientLeft);

  alert(box.clientTop);

http://blog.csdn.net/xuantian868/article/details/3116442

http://blog.sina.com.cn/s/blog_48e6792c0100z7ge.html

DOM元素的大小和位置的更多相关文章

  1. C1:DOM 元素的尺寸和位置

    DOM元素的尺寸和位置 DOM 元素的尺寸 DOM.offsetWidth/offsetHeight: 包括内容区宽/高,padding,border,不包括margin.如果元素的box-sizei ...

  2. JavaScript获取DOM元素位置和尺寸大小

      在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScri ...

  3. 获取DOM元素位置和尺寸大小

    JavaScript获取DOM元素位置和尺寸大小 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽 ...

  4. 使用html元素的getBoundingClientRect来获取dom元素的时时位置和大小

    使用: var section = $('.section'):这是jquery包装的dom元素,其他前端框架返回的可能也是一个包装元素, 我们需要获得的是里面的html的dom元素 然后:secti ...

  5. 第一百一十七节,JavaScript,DOM元素尺寸和位置

    学习要点: 1.获取元素CSS大小 2.获取元素实际大小 3.获取元素周边大小 本章,我们主要讨论一下页面中的某一个元素它的各种大小和各种位置的计算方式,以便更好的理解. 一.获取元素CSS大小 1. ...

  6. DOM元素尺寸和位置

    一.获取元素 CSS大小 1.通过style 内联获取元素的大小 var box = document.getElementById('box'); //获取元素 box.style.width; / ...

  7. JavaScript(第二十一天)【DOM元素尺寸和位置】

    学习要点: 1.获取元素CSS大小 2.获取元素实际大小 3.获取元素周边大小 本章,我们主要讨论一下页面中的某一个元素它的各种大小和各种位置的计算方式,以便更好的理解.   一.获取元素CSS大小 ...

  8. DOM元素的位置、尺寸及更多的信息

    一.基本概念 document.documentElement是整个DOM树的根节点,对应的元素就是html.下面将其称作根元素或根节点. document.body,对应的元素是body 二.浏览器 ...

  9. vue 组件传递值以及获取DOM元素的位置信息

    1.父组件 select_li.vue 1.1 父组件模板 <template> <div id='selectLi' ref="selectLi"> &l ...

随机推荐

  1. struts2 s:file标签使用及文件上传例子

      <s:form action="uploadaction" method="post" enctype="multipart/form-da ...

  2. .net core 跨平台实践

    本人采用Ubuntu 14.04 来实现.net core 的跨平台实践. 首先安装Ubuntu14.04系统.安装细节问百度. 1..net core console程序的跨平台 首先新建一个con ...

  3. golang笔记——流程控制

    条件语句 if ... else if ... else 语句,如: { fmt.Println(">100") } < num { fmt.Println(" ...

  4. UIScrollView的缩放原理

    当用户在UIScrollView身上使用捏合手势时,UIScrollView会给代理发送一条消息,询问代理究竟要缩放自己内部的哪一个子控件(哪一块内容) 当用户在UIScrollView身上使用捏合手 ...

  5. 超简单,安卓模拟器手动root

    本文转载自:http://quantoubao.blog.163.com/blog/static/2083211702013870501987/ 安装Android SDK安卓模拟器的方法很简单,网上 ...

  6. 引用项目外dll时不显示注释的解决方案

    在引用项目外的dll时,显示类库中的注释可按以下步骤: 方法或变量用summary添加注释,如:         /// <summary>发送post请求         /// < ...

  7. command shell 的知识整理

    cmd 也是shell  windowns的外壳一种. 查看文件和文件夹 dir mkdir *** 创建文件夹 rd *** 删除文件夹(应该有参数的,递归之类的)CTR+C 终止命令 cd> ...

  8. Count Complete Tree Nodes

    Given a complete binary tree, count the number of nodes. Definition of a complete binary tree from W ...

  9. 【Objective-C】NSDate详解及获取当前时间等常用操作

    NSDate类用于保存时间值,同时提供了一些方法来处理一些基于秒级别时差(Time Interval)运算和日期之间的早晚比较等. 1. 创建或初始化可用以下方法 用于创建NSDate实例的类方法有 ...

  10. Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds -----》myeclipse2015

    错误:Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds 错误提示就是我们限定了部署的时间导致的错 ...