Detaillierte Erläuterung der Verwendung des Offsetleft-Attributs in den Javascript-Kenntnissen-js-Tutorial-php.cn

Detaillierte Erläuterung der Verwendung des Offsetleft-Attributs in den Javascript-Kenntnissen

WBOY

Freigeben： 2016-05-16 15:32:44

Original

1815 Leute haben es durchsucht

Dieses Attribut kann den Abstand zwischen dem aktuellen Element und dem linken Rand eines übergeordneten Elements zurückgeben. Natürlich ist auch dieses übergeordnete Element spezifisch.

(1). Wenn im übergeordneten Element ein positioniertes Element vorhanden ist, wird der Abstand zum Rand des positionierten Elements zurückgegeben, das dem aktuellen Element am nächsten liegt.
(2). Wenn im übergeordneten Element kein Positionierungselement vorhanden ist, wird der Abstand relativ zum linken Rand des Körpers zurückgegeben.

Grammatikstruktur:

obj.offsetleft

Besonderer Hinweis: Dieses Attribut ist schreibgeschützt und es kann kein Wert zugewiesen werden.

Codebeispiel:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
*{
 margin: 0px;
 padding: 0px;
}
#main{
 width:300px;
 height:300px;
 background:red;
 position:absolute;
 left:100px;
 top:100px;
}
#box{
 width:200px;
 height:200px;
 background:blue;
 margin:50px; 
 overflow:hidden;
}
#inner{
 width:50px;
 height:50px;
 background:green;
 text-align:center;
 line-height:50px;
 margin:50px;
}
</style>
<script type="text/javascript">
window.onload=function(){
 var inner=document.getElementById("inner");
 inner.innerHTML=inner.offsetLeft;
}
</script>
</head>
<body>
<div id="main">
 <div id="box">
 <div id="inner"></div>
 </div>
</div>
</body>
</html>

Nach dem Login kopieren

Der obige Code kann den Abstand zwischen dem inneren Element und der linken Seite des Hauptelements zurückgeben, da das Hauptelement das erste positionierte übergeordnete Element ist.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
*{
 margin: 0px;
 padding: 0px;
}
#main{
 width:300px;
 height:300px;
 background:red;
 margin:100px;
}
#box{
 width:200px;
 height:200px;
 background:blue;
 overflow:hidden;
}
#inner{
 width:50px;
 height:50px;
 background:green;
 text-align:center;
 line-height:50px;
 margin:50px;
}
</style>
<script type="text/javascript">
window.onload=function(){
 var inner=document.getElementById("inner");
 inner.innerHTML=inner.offsetLeft;
}
</script>
</head>
<body>
<div id="main">
 <div id="box">
 <div id="inner"></div>
 </div>
</div>
</body>
</html>

Nach dem Login kopieren

Der obige Code gibt die Größe des inneren Elements von der linken Seite des Körperelements zurück.

Dieses Attribut weist bestimmte Kompatibilitätsprobleme auf. Weitere Informationen finden Sie im Kapitel Eine kurze Einführung in die Offsetleft-Kompatibilität .

ps: Welche spezifische Rolle spielt das offsetLeft-Attribut in js?

Sie können den linken Abstand zwischen einem Objekt und dem Dokument bestimmen, also dem linken Rand des Browsers. Wenn Sie beispielsweise ein Div schreiben und das Div erhalten, können Sie mithilfe von Alert (Ihrem div.offsetLeft) den aktuellen Abstand von der linken Seite des Browsers anzeigen. Natürlich können Sie es auch verwenden, um Objekten nicht nur Werte zuzuweisen, sondern auch offsetTop, offsetWidth und offsetHeight, was alles sehr nützliche Eigenschaften in JS ist.