前言：以前一直是看別人寫(xiě)的，然后學(xué)習(xí)點(diǎn)東西，現(xiàn)在也把自己的學(xué)習(xí)記錄下來(lái)，給大家一個(gè)學(xué)習(xí)的機(jī)會(huì)，歡迎大家多多評(píng)論和推薦哈，共同進(jìn)步。竟然還有六個(gè)人關(guān)注我了 ，哈哈 開(kāi)心。我會(huì)繼續(xù)寫(xiě)下去的。。
null和undefined都代表沒(méi)有，但是null是屬性存在值不存在，undefined是連這個(gè)屬性都不存在
//例如 document.parentNode//瀏覽器天生自帶的一個(gè)屬性：父親節(jié)點(diǎn)的屬性 null (因?yàn)橐粋€(gè)頁(yè)面中的document已經(jīng)是最頂級(jí)元素了，它沒(méi)有父親) document.parentnode//undefined (因?yàn)闆](méi)有parentnode這個(gè)屬性)
1、parentNode:父親節(jié)點(diǎn) HTML結(jié)構(gòu)層級(jí)關(guān)系中的上一級(jí)元素
var outer = document.getElementById('outer'); var inner = document.getElementById('inner'); var center = document.getElementById('center'); center.parentNode //inner2、offsetParent：父級(jí)參照物 在同一個(gè)平面中，最外層的元素是里面所有元素的父級(jí)參照物（和HTML層級(jí)結(jié)構(gòu)沒(méi)有必然的聯(lián)系）
一般來(lái)說(shuō)一個(gè)頁(yè)面中所有元素的父級(jí)參照物都是body
document.body.offsetParent // null
想要改變父級(jí)參照物需要通過(guò)position定位來(lái)進(jìn)行改變（absolute relative fixed 都可以進(jìn)行改變 ）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } #outer{ width:180px; height:180px; margin:50px auto; border:10px solid #000; background:orange; padding:50px; } #inner{ width:80px; height:80px; padding:50px; border:10px solid #000; background:green; } #center{ width:50px; height:50px; border:10px solid #000; background:red; } </style></head><body> <div id="outer"> <div id="inner"> <div id="center"></div> </div> </div> <script> var outer = document.getElementById('outer'); var inner = document.getElementById('inner'); var center = document.getElementById('center'); outer.style.position = "relative";//這樣inner和center的參照物都是outer center.offsetParent//outer inner.offsetParent//outer outer.offsetParent//body outer.style.position = "relative";// inner.style.position = "relative"; center.offsetParent//inner inner.offsetParent//outer outer.offsetParent//body </script></body></html>3、offsetTop/offsetLeft :當(dāng)前元素（外邊框）距離其父級(jí)參照物（內(nèi)邊框）的偏移距離
具體如下圖所示：
下面是一個(gè)offset方法：等同于jQuery中的offset方法，實(shí)現(xiàn)獲取頁(yè)面中任意一個(gè)元素，距離body的偏移（包含左偏移和上偏移），不管當(dāng)前元素的父級(jí)參照物是誰(shuí)。獲取的一個(gè)結(jié)果是一個(gè)對(duì)象{left:距離BODY的左偏移，top:距離BODY的上偏移}
在標(biāo)準(zhǔn)的IE8瀏覽器中，我們使用offsetLeft/offsetTop其實(shí)是把父級(jí)參照物的邊框已經(jīng)算在內(nèi)了。所以我們不需要自己在單獨(dú)加邊框了
代碼如下：
function offset(curEle){ var totalLeft = null,totalTop = null,par = curEle.offsetParent; //首先加自己本身的左偏移和上偏移 totalLeft+=curEle.offsetLeft; totalTop+=curEle.offsetTop //只要沒(méi)有找到body，我們就把父級(jí)參照物的邊框和偏移也進(jìn)行累加 while(par){ if(navigator.userAgent.indexOf("MSIE 8.0")===-1){ //累加父級(jí)參照物的邊框 totalLeft+=par.clientLeft; totalTop+=par.clientTop } //累加父級(jí)參照物本身的偏移 totalLeft+=par.offsetLeft; totalTop+=par.offsetTop par = par.offsetParent; } return{ left:totalLeft, top:totalTop } } console.log(offset(center).left)以上這篇js獲取元素的偏移量offset簡(jiǎn)單方法(必看)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
