suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung der Verwendung des Offsetleft-Attributs in den Javascript-Kenntnissen

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

WBOY
WBOYOriginal
2016-05-16 15:32:441794Durchsuche

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>

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>

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.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Code für die Implementierung der versenkbaren Menüleiste in JavaScript. Javascript-KenntnisseNächster Artikel：Code für die Implementierung der versenkbaren Menüleiste in JavaScript. Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen