JS OffsetParent属性

JS OffsetParent属性nbsp offsetParent 属性返回一个对象的引用 这个对象是距离调用 offsetParent 的元素最近的 在包含层次中最靠近的 并且是已进行过 CSS 定位的容器元素 如果这个容器元素未进行 CSS 定位 则 offsetParent 属性的取值为根元素 在标准兼容模式下为 html 元素 在怪异呈现模式下为 body 元素 的引用 当容器元素的 style display 被设置为 none 时 译



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

 

句法:

parentObj = element.offsetParent

变量:

· parentObj 是一个元素的引用,当前元素的偏移量在其中计算。

代码

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/–>http://www.w3.org/TR/html4/strict.dtd”>




Untitled Document










测试OffsetParent属性





测试结果:

       Firefox3:”BODY”

       Internet Explorer 7:”BODY”

      Opera 9.51:”BODY”

      Chrome 0.2:”BODY”

      Safari 3:”BODY

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

 

测试代码2

 代码

div测试代码

测试OffsetParent属性



测试结果:

         Firefox3:”DIV”
         Internet Explorer 7:”DIV”
        Opera 9.51:”DIV”
        Chrome 0.2:”DIV”
        Safari 3:”DIV”





结论:

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

 

测试代码3



代码

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/–>http://www.w3.org/TR/html4/strict.dtd”>




Untitled Document








测试结果:

        Firefox3:”H1″

        Internet Explorer 7:”H1″

       Opera 9.51:”H1″

       Chrome 0.2:”H1″

       Safari 3:”H1″

结论:

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


    function offset_init() {

        var pElement = document.getElementById(“sonObj”);
        parentObj = pElement.offsetParent;
        alert(parentObj.tagName);
    }










测试OffsetParent属性







版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/204789.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月19日 下午7:32
下一篇 2026年3月19日 下午7:32


相关推荐

  • GPT-5.2正式发布!国内首发“喂饭级”使用教程来了!

    GPT-5.2正式发布!国内首发“喂饭级”使用教程来了!

    2026年3月15日
    2
  • JVM – 类加载与子系统

    JVM – 类加载与子系统1 类加载与子系统类加载器子系统负责从文件系统或网络中加载 Class 文件 Class 文件在开头有特定的文件标识 ClassLoader 只负责 Class 文件的加载 至于是否可以运行 则由 ExecutionEng 来决定 加载的类信息存放于一块称为方法区的内存空间 除了类的信息外 方法区中还会存放运行时常量池 Constantpool 信息 可能还包括字符串字面量和数字常量 1 类加载步骤 加载阶段通过一个类的全限定名称获取定义此类的二进制字节流 将 Class 文件从磁盘或者网

    2026年3月19日
    3
  • java锁cas(java锁的实现原理)

    一、Java锁1.常见的锁有synchronized和Lock()①synchronized是jvm层面实现的,可以直接用,不过要锁住某个对象;lock是属于j.u.c包下的接口,用的时候要实现lock接口。②synchronized一般和wait()、notify()、notifyAll()一起使用,使用完不用释放锁;lock必须在finally里面手动释放。@lock锁与s…

    2022年4月15日
    56
  • freemarker 的ObjectWrapper Settings

    freemarker 的ObjectWrapper Settings

    2021年8月28日
    58
  • Python+Agent入门实战:0基础搭建可复用AI智能体

    Python+Agent入门实战:0基础搭建可复用AI智能体

    2026年3月16日
    2
  • app软件版本号命名规则_文件版本号命名规则

    app软件版本号命名规则_文件版本号命名规则为什么需要规范APP命名?当我们在需求及业务明确后,产品及设计已经做出了对应的文档及UI图,那么进入研发阶段开始编码实现功能,当功能实现的差不多了之后,期间会需要签出不同的包作为展示或测试,不管当前的进度处于什么阶段,签出对应安装包的时候都会对其进行命名并发送给测试人员。一般往往通过命名,就可以大概知道当前签出的包处于哪个版本阶段,Alpha阶段?Beta阶段?R

    2025年10月21日
    4

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号