Javascript拖拽系列文章1之offsetParent屬性第2/3頁(yè)
更新時(shí)間：2008年09月22日 15:11:51 作者：
這個(gè)系列文章主要是講述實(shí)現(xiàn)Javascript拖拽功能的基礎(chǔ)知識(shí)，并將在最后給出一個(gè)完整的示例。適合對(duì)拖拽完全不懂的人閱讀
測(cè)試結(jié)果：
Firefox3："BODY"
Internet Explorer 7："BODY"
Opera 9.51："BODY"
Chrome 0.2："BODY"
Safari 3："BODY"
結(jié)論：
當(dāng)某個(gè)元素及其父元素都未進(jìn)行CSS定位時(shí)，則這個(gè)元素的offsetParent屬性的取值為根元素。更確切地說(shuō)，這個(gè)元素的各種偏移量計(jì)算（offsetTop、offsetLeft等）的參照物為Body元素。（其實(shí)無(wú)論時(shí)標(biāo)準(zhǔn)兼容模式還是怪異模式，根元素都為Body元素）
測(cè)試代碼2：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
測(cè)試結(jié)果：
Firefox3："DIV"
Internet Explorer 7："DIV"
Opera 9.51："DIV"
Chrome 0.2："DIV"
Safari 3："DIV"
結(jié)論：
當(dāng)某個(gè)元素的父元素進(jìn)行了CSS定位時(shí)（absolute或者relative），則這個(gè)元素的offsetParent屬性的取值為其父元素。更確切地說(shuō)，這個(gè)元素的各種偏移量計(jì)算（offsetTop、offsetLeft等）的參照物為其父元素。
測(cè)試代碼3：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
Firefox3："H1"
Internet Explorer 7："H1"
Opera 9.51："H1"
Chrome 0.2："H1"
Safari 3："H1"
結(jié)論：
當(dāng)某個(gè)元素及其父元素都未進(jìn)行CSS定位時(shí)（absolute或者relative），則這個(gè)元素的offsetParent屬性的取值為在DOM結(jié)構(gòu)層次中距離其最近，并且已進(jìn)行了CSS定位的元素。
相關(guān)文章
深拷貝和淺拷貝是面試中經(jīng)常出現(xiàn)的,主要考察對(duì)基本類型和引用類型的理解深度,本文主要給大家介紹了js實(shí)現(xiàn)深拷貝和淺拷貝的方式,需要的朋友可以參考下2022-05-05
深入理解JavaScript中為什么string可以擁有方法
下面小編就為大家?guī)?lái)一篇深入理解JavaScript中為什么string可以擁有方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
這篇文章主要為大家詳細(xì)介紹了純JS實(shí)現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
本文主要介紹了Javascript仿京東放大鏡效果的實(shí)例。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-03-03
用js控件div的滾動(dòng)條,讓它在內(nèi)容更新時(shí)自動(dòng)滾到底部的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇用js控件div的滾動(dòng)條,讓它在內(nèi)容更新時(shí)自動(dòng)滾到底部的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
本篇文章主要介紹了詳解webpack介紹&安裝&常用命令，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
layui添加動(dòng)態(tài)菜單與選項(xiàng)卡
這篇文章主要為大家詳細(xì)介紹了layui添加動(dòng)態(tài)菜單與選項(xiàng)卡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
指定區(qū)域的圖片自動(dòng)按比例縮小的js代碼（防止頁(yè)面被圖片撐破）
有時(shí)候我們更新的內(nèi)容，有很多的大圖片，就會(huì)導(dǎo)致頁(yè)面變形或看不到全圖。一般情況我們用css的max-width控制，但有些瀏覽器不支持，我們也可以用js做個(gè)補(bǔ)充2014-02-02
這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)易拖拽的示例，幫助大家更好的理解和學(xué)習(xí)JavaScript,感興趣的朋友可以了解下2020-10-10
JavaScript中使用document.write向頁(yè)面輸出內(nèi)容實(shí)例
這篇文章主要介紹了JavaScript中使用document.write向頁(yè)面輸出內(nèi)容實(shí)例,本文講解了輸出普通文字、帶HTML標(biāo)簽內(nèi)容的方法,需要的朋友可以參考下2014-10-10