Heim > Artikel > Web-Frontend > Eine kurze Diskussion über die offset()-Methode von jQuery und das Beispielsharing_jquery

Eine kurze Diskussion über die offset()-Methode von jQuery und das Beispielsharing_jquery

WBOYOriginal: 2016-05-16 15:49:57940Durchsuche

Definition und Verwendung der offset()-Methode:

Diese Methode gibt den Offset des übereinstimmenden Elements relativ zum Dokumentobjekt zurück oder legt ihn fest.

Grammatikstruktur 1:

$(selector).offset()
Rufen Sie den relativen Offset des übereinstimmenden Elements im aktuellen Dokument ab.
Das zurückgegebene Objekt enthält zwei ganzzahlige Eigenschaften: top und left.
Diese Methode funktioniert nur bei sichtbaren Elementen.
Beispielcode:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">

<style type="text/css">
*{
 margin:0px;
 padding:0px;
}
.father{
 border:1px solid black;
 width:400px;
 height:300px;
 padding:10px;
 margin:50px;
}
.children{
 height:150px;
 width:200px;
 margin-left:50px;
 background-color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
   a=$(".children").offset();
   alert("元素的偏移量坐标是："+a.top+"|"+a.left+"");
  })
})
</script>
</head>
<body>
<div class="father">
 <div class="children"></div>
</div>
<button>获取元素的坐标</button>
</body>
</html>

Der obige Code kann den Offset des Sub-Div relativ zum Dokument anzeigen.

Grammatikstruktur 2:

$(selector).offset(value)

Legen Sie die Koordinaten des passenden Elements relativ zum Dokumentobjekt fest.
Mit der Methode offset() können wir die Position des Elements zurücksetzen. Die Position dieses Elements ist relativ zum Dokumentobjekt.
Wenn das ursprüngliche Positionsstilattribut des Objekts statisch ist, wird es zur Implementierung der Verschiebung in „relativ“ geändert.
Parameterliste:

Parameterbeschreibung
Der Wert gibt die oberen und linken Koordinaten in Pixeln an.

Mögliche Werte:

1. Wertepaar, z. B. {top:200,left:10}.
2. Objekt mit den Attributen oben und links.

Beispielcode:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">

<style type="text/css">
.father{
 border:1px solid black;
 width:400px;
 height:300px;
}
.children{
 height:150px;
 width:200px;
 background-color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
  $(".children").offset({top:100,left:100})
 })
})
</script>
</head>
<body>
<div class="father">
 <div class="children"></div>
</div>
<button>点击设置偏移量</button>
</body>
</html>

Der obige Code kann den Offset des Div relativ zum Dokument festlegen.

Grammatikstruktur drei:

Verwenden Sie den Rückgabewert der Funktion, um die Offset-Koordinaten festzulegen:

$(selector).offset(function(index,oldoffset))
Parameterliste:

Parameterbeschreibung
function(index,oldvalue) gibt eine Funktion an, die die neuen Offsetkoordinaten des ausgewählten Elements zurückgibt:
Index – optional. Der Index des Elements.
alter Wert – optional. aktuelle Koordinaten.

Beispielcode:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css">
.father{
 border:1px solid black;
 width:400px;
 height:300px;
}
.children{
 height:150px;
 width:200px;
 background-color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
  $(".children").offset(function(a,b){
   var newpoint= new Object();
   newpoint.top=b.top+50;
   newpoint.left=b.left+50;
   return newpoint;
  })
 })
})
</script>
</head>
<body>
<div class="father">
 <div class="children"></div>
</div>
<button>点击设置偏移量</button>
</body>
</html>

Der obige Code kann auch den Offset des Elements festlegen, der Wert wird jedoch über die Funktion zurückgegeben.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.

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：jQuery implementiert die Methode zum Einfügen eines neuen Elements vor dem letzten element_jqueryNächster Artikel：jQuery implementiert die Methode zum Einfügen eines neuen Elements vor dem letzten element_jquery

In Verbindung stehende Artikel

Mehr sehen