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

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

WBOY

Freigeben： 2016-05-16 15:49:57

Original

979 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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.