zoukankan      html  css  js  c++  java
  • offset client scroll

    在html中,任何一个元素都有三个表示位置和大小的对象:client,offset和scroll,每个对象都有相应的height,width,top,left属性,那么这些究竟有什么区别呢?
        client属性是指一个元素直接可以看得到不包括边框的区域,所谓的直接可以看得到不包括边框是 这样的概念:不包括滚动条占据的空间(实际上,如果出现了滚动条,元素的高度不会发生变化,clientHeight则会自动减少滚动条需要占据的17个 像素的高度),不包括滚动条隐藏的区域、不包括边(border)。因此,clientHeight就是这个区域的高度,而clientTop实际上就是 border的高度;
        offset属性是指一个元素直接可以看得到包括边框的区域,所谓的直接可以看得到包括边框是这样的概念:不包括滚动条隐藏的区域、包括边(border)的宽度。因此,offsetHeight就是这个区域的高度,而clientTop实际上是这个区域到它的父容器的距离;
        scroll高度和元素的边框没有关系,它是实际上元素的高度,因此,如果出现了滚动条,scrollHeight可能会大于offset或client的高度。scrollTop则是元素的实际的顶部和可见的顶部这件的距离。

    offsetParent属性返回一个对象的引用,这个对象是距离调 用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素;在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 "none"时(译注:IE和Opera除外),offsetParent属性 返回 null。

    当某个元素及其DOM结构层次中元素都未进行CSS定位时(absolute或者relative)[或者某个元素进行CSS定位时而DOM结构层次中元素都未进行CSS定位时],则这个元素的offsetParent属性的取值为根元素。更确切地说,这个元素的各种偏移量计算(offsetTop、offsetLeft等)的参照物为Body元素。(其实无论时标准兼容模式还是怪异模式,根元素都为Body元素)

    当某个元素的父元素进行了CSS定位时(absolute或者relative),则这个元素的offsetParent属性的取值为其父元素。更确切地说,这个元素的各种偏移量计算(offsetTop、offsetLeft等)的参照物为其父元素

    当某个元素及其父元素都未进行CSS定位时(absolute或者relative),则这个元素的offsetParent属性的取值为在DOM结构层次中距离其最近,并且已进行了CSS定位的元素。

  • 相关阅读:
    [转载]tlb、tlh和tli文件的关系
    [转载]美国不是中国唯一的榜样
    使用spring.net 1.3.2框架部署在虚拟目录上发生错误
    用Log4Net记录NHibernate中执行的SQL语句及执行时间
    IIS7/8 HTTP Error 500.19 错误 0x80070021
    IE下点击scrollbar会导致焦点移动到body
    性能测试学习(一)--基础知识点
    测试基础知识点汇总
    如何制定测试计划
    《软件测试经验与教训》摘录
  • 原文地址:https://www.cnblogs.com/wxlyq/p/5124385.html
Copyright © 2011-2022 走看看