欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js parentElement和offsetParent之間的區(qū)別

 更新時(shí)間:2010年03月23日 23:15:56   作者:  
這里主要說(shuō)的是 offsetParent 屬性,這個(gè)屬性在 MSDN 的文檔中也沒(méi)有解釋清楚,這就讓人更難理解這個(gè)屬性。 這幾天在網(wǎng)上找了些資料看看,再加上自己的一些測(cè)試,對(duì)此屬性有了那么一點(diǎn)的了解,在這里總結(jié)一下。
首先是 parentElement 屬性,這個(gè)屬性好理解,就是在 DOM 層次結(jié)構(gòu)定義的上下級(jí)關(guān)系,如果元素A包含元素B,那么元素B就可以通過(guò) parentElement 屬性來(lái)獲取元素A。
這里主要說(shuō)的是 offsetParent 屬性,這個(gè)屬性在 MSDN 的文檔中也沒(méi)有解釋清楚,這就讓人更難理解這個(gè)屬性。 這幾天在網(wǎng)上找了些資料看看,再加上自己的一些測(cè)試,對(duì)此屬性有了那么一點(diǎn)的了解,在這里總結(jié)一下。
要明白 offsetParent 屬性,要先明白“已定位元素” 這個(gè)名字,所謂“已定位元素”就是指給元素設(shè)置了 position 屬性的樣式,并且 position 樣式屬性的值等于 absolute、relative、fixed 之一的元素。
在使用 offsetParent 屬性獲取父級(jí)對(duì)象時(shí)有以下兩種情況:
    1、元素本身已經(jīng)定位
        如果元素本身已經(jīng)定位,那么 offsetParent 屬性返回此元素已定位父級(jí)元素,如沒(méi)有已定位的父級(jí)元素,則返回 BODY 對(duì)象,例如:
復(fù)制代碼 代碼如下:

<body>
<p>
<div>
<span id="obj1" style="position:absolute"></span>
</div>
<div id="pObj1" style="position:absolute">
<span id="obj2" style="position:absolute"></span>
</div>
</p>
</body>

    obj1.offsetParent 返回 BODY 對(duì)象
    obj2.offsetParent 返回 pObj1 對(duì)象
    2、元素沒(méi)有定位
        如果元素沒(méi)有定位, offsetParent 不但會(huì)找已經(jīng)定位的父級(jí)元素而且還會(huì)查找類型為 TD 和 TABLE 的父級(jí)元素,只要找到這三種父級(jí)元素的其中任何一種元素將返回此元素,否則返回 BODY 對(duì)象,例如:
復(fù)制代碼 代碼如下:

<table width="500" border="0">
<tr>
<td id="td1">
<div id="pObj1">
<span id="obj1"></span>
</div>
</td>
</tr>
<tr>
<td>
<div id="pObj2" style="position:relative">
<span id="obj2"></span>
</div>
</td>
</tr>
</table>

    obj1.offsetParent 返回 td1 對(duì)象
    obj2.offsetParent 返回 pObj2 對(duì)象
在 DOM 元素的屬性里,還有 parentNode 這個(gè)屬性,其實(shí)這個(gè)屬性跟 parentElement 屬性是一個(gè)意思,parentElement 屬性是 IE 特有的,W3C 標(biāo)準(zhǔn)是使用 parentNode 屬性,還有 children 和 childNodes, children 是 IE 特有的, childNodes 被其他瀏覽支持。

相關(guān)文章

  • js生成隨機(jī)數(shù)(指定范圍)的實(shí)例代碼

    js生成隨機(jī)數(shù)(指定范圍)的實(shí)例代碼

    下面小編就為大家?guī)?lái)一篇js生成隨機(jī)數(shù)(指定范圍)的實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-07-07
  • 使用Object.defineProperty實(shí)現(xiàn)簡(jiǎn)單的js雙向綁定

    使用Object.defineProperty實(shí)現(xiàn)簡(jiǎn)單的js雙向綁定

    這篇文章主要介紹了使用Object.defineProperty實(shí)現(xiàn)簡(jiǎn)單的js雙向綁定的相關(guān)資料,需要的朋友可以參考下
    2016-04-04
  • JS實(shí)現(xiàn)黑色大氣的二級(jí)導(dǎo)航菜單效果

    JS實(shí)現(xiàn)黑色大氣的二級(jí)導(dǎo)航菜單效果

    這篇文章主要介紹了JS實(shí)現(xiàn)黑色大氣的二級(jí)導(dǎo)航菜單效果,具有延遲響應(yīng)鼠標(biāo)事件顯示切換效果的功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
    2015-09-09
  • JavaScript實(shí)現(xiàn)獲得所有兄弟節(jié)點(diǎn)的方法

    JavaScript實(shí)現(xiàn)獲得所有兄弟節(jié)點(diǎn)的方法

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)獲得所有兄弟節(jié)點(diǎn)的方法,實(shí)例分析了javascript節(jié)點(diǎn)遍歷的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-07-07
  • 詳解JavaScript中常用操作符的使用

    詳解JavaScript中常用操作符的使用

    在 JavaScript 中,有一些操作符可以使代碼更簡(jiǎn)潔、易讀和高效。這篇文章為大家整理了11個(gè)JavaScript中常用操作符的使用,需要的可以參考一下
    2023-04-04
  • JavaScript文檔碎片操作實(shí)例分析

    JavaScript文檔碎片操作實(shí)例分析

    這篇文章主要介紹了JavaScript文檔碎片操作技巧,結(jié)合實(shí)例形式分析了JavaScript中使用文檔碎片優(yōu)化dom操作的技巧,需要的朋友可以參考下
    2015-12-12
  • js實(shí)現(xiàn)每日簽到功能

    js實(shí)現(xiàn)每日簽到功能

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)每日簽到功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-11-11
  • Sort()函數(shù)的多種用法

    Sort()函數(shù)的多種用法

    sort() 方法用于對(duì)數(shù)組的元素進(jìn)行排序。接下來(lái)通過(guò)本文給大家介紹Sort()函數(shù)的多種用法,對(duì)sort函數(shù)的用法相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)
    2016-03-03
  • AjaxFileUpload.js實(shí)現(xiàn)異步上傳文件功能

    AjaxFileUpload.js實(shí)現(xiàn)異步上傳文件功能

    這篇文章主要為大家詳細(xì)介紹了AjaxFileUpload.js實(shí)現(xiàn)異步上傳文件功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-04-04
  • 微信小程序圖片右邊加兩行文字的代碼

    微信小程序圖片右邊加兩行文字的代碼

    這篇文章主要介紹了微信小程序圖片右邊加兩行文字的代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-04-04

最新評(píng)論