L'attribut OffsetParent renvoie une référence à un objet. Si cet élément de conteneur ne positionne pas CSS, la valeur des propriétés de décalage est l'élément racine (l'élément HTML est l'élément HTML dans le mode de compatibilité standard; c'est un élément corporel dans le mode de présentation étrange). Lorsque le style. Display de l'élément de conteneur est défini sur "Aucun" (sauf pour: IE et Opera), la propriété OfficeParent renvoie Null.
syntaxe:
parentObj = element.offsetparent
variable:
・ ParentObj est une référence à un élément et le décalage de l'élément actuel est calculé.
Copier le code du code comme suit:
<!
<html>
<adal>
<meta http-equiv = "content-type" content = "text / html; charset = utf-8" /> />
<Title> Document sans titre </TITME>
<script type = "text / javascript" linguistique = "javascript">
fonction offset_init () {
var pegelement = document.getElementById ("SonOBJ");
parentObj = pegelement.offsetparent;
Alert (parentObj.tagname);
}
</cript>
</ head>
<corps uniquement = "Office_Init ()" >>
<div id = "parent">
<p id = "SonOBJ"> Test des attributs de pareftarents </p>
</div>
</docy>
</html>
Résultats des tests:
Firefox3: "corps"
Internet Exploorr 7: "corps"
Opéra 9.51: "corps"
Chrome 0,2: "corps"
Safari 3: "Corps
en conclusion:
Lorsque les éléments et ses niveaux de structure DOM ne sont pas effectués dans le niveau de structure DOM (absolu ou relâché) [ou un certain élément est positionné lorsque l'élément n'est pas effectué dans le niveau de structure DOM lorsque le niveau de structure DOM n'est pas effectué], puis La propriété offSetParent de cet élément La valeur de la valeur est l'élément racine. Plus précisément, les références de divers calculs de décalage de cet élément (offsetop, offsetleft, etc.) sont des éléments corporels. (En fait, quel que soit le mode de compatibilité standard du temps ou le mode étrange, les éléments racinaires sont des éléments corporels)
Code de test 2
Copier le code du code comme suit:
<!
<html>
<adal>
<meta http-equiv = "content-type" content = "text / html; charset = utf-8" /> />
<Title> Document sans titre </TITME>
<Style type = "text / css">
#Parent {
Position: Absolute; <! - Position: Relative; ->
Gauche: 25px;
En haut: 188px;
Border: 1px noir solide;
}
</ style>
<script type = "text / javascript" linguistique = "javascript">
fonction offset_init () {
var pegelement = document.getElementById ("SonOBJ");
parentObj = pegelement.offsetparent;
Alert (parentObj.tagname);
}
</cript>
</ head>
<corps uniquement = "Office_Init ()" >>
<div id = "parent"> Code de test div
<p id = "SonOBJ"> Test des attributs de pareftarents </p>
</div>
</docy>
</html>
Résultats des tests:
Firefox3: "div"
Internet Exploorr 7: "Div"
Opéra 9.51: "Div"
Chrome 0.2: "Div"
Safari 3: "Div"
en conclusion:
Lorsque l'élément parent d'un certain élément effectue un positionnement CSS, la valeur de la propriété Parent Office de cet élément est son élément parent. Plus précisément, les références des différents calculs de décalage de cet élément (Officetop, offsetleft, etc.) sont leurs éléments parents
Code de test 3
Copier le code du code comme suit:
<!
<html>
<adal>
<meta http-equiv = "content-type" content = "text / html; charset = utf-8" /> />
<Title> Document sans titre </TITME>
<Style type = "text / css">
#Grandfather {
Position: relative;
Gauche: 25px;
En haut: 188px;
Border: 1px noir solide;
}
</ style>
<script type = "text / javascript" linguistique = "javascript">
fonction offset_init () {
var pegelement = document.getElementById ("SonOBJ");
parentObj = pegelement.offsetparent;
Alert (parentObj.tagname);
}
</cript>
</ head>
<corps uniquement = "Office_Init ()" >>
<h1 id = "grand-père">
<div id = "parent">
<p id = "SonOBJ"> Test des attributs de pareftarents </p>
</div>
</h1>
</docy>
</html>
Résultats des tests:
Firefox3: "H1"
Internet Exploorr 7: "H1"
Opéra 9.51: "H1"
Chrome 0,2: "H1"
Safari 3: "H1"
en conclusion:
Lorsqu'un certain élément et son élément parent ne sont pas le positionnement de CSS, la valeur de la propriété Parent Office de cet élément est la plus proche de lui au niveau de la structure DOM et le positionnement CSS a été effectué.