JS erhält die Offsettop, OffsetLeft und andere Eigenschaften des Elements
obj.clientwidth // Erhalten Sie die Breite des Elements
obj.clientHeight // die Höhe des Elements
obj.offsetleft // Das Element relativ zum linken Element des übergeordneten Elements
obj.offsettop // die Spitze des Elements relativ zum übergeordneten Element
obj.offsetwidth // die Breite des Elements
Obj.offseteight // die Höhe des Elements
der Unterschied:
clientwidth = width + padding
ClientHeight = Höhe + Polsterung
Offsetwidth = Breite + Polsterung + Rand
offseteight = width + padding + rande
Offset hat eine größere Grenzbreite als der Kunde
// Erhalten Sie die horizontale Koordinate des Elements (relativ zum Fenster) GetTop (e) {var offset = e.offsettop; if (e.offsetParent! = NULL) Offset+= Gettop (e.offsetParent); Rückgabeversatz;} // Die horizontale Koordinate des Elements (relativ zur Fenster) Getleft (e) {var Offset = E.OffsetLeft; if (e.offsetParent! = null) offset+= getleft (e.offsetParent); Rückset zurück;}Ich habe auch einen JS -Artikel über das Erhalten von Elementorten geschrieben: JS erhält die Offsettop, OffsetLeft und andere Attribute des Elements. Wir können die Position des Elements relativ zum Fenster durch die Attribute für Offsettop und OffsetLeft erhalten, aber die Offsettop- und OffsetLeft-Attribute sind beide relativ zum übergeordneten Element und die Elemente, die normalerweise die Position erhalten müssen, sind nicht in der äußersten Schicht, so dass die Offset-bezogenen Attribute, die das obere Element traversbar sind, intensiv sind. Dann wird Effizienz zum Problem.
// Die horizontale Koordinate des Elements (relativ zur Fenster) GetTOP (e) {var offset = e.offsettop; if (e.offsetParent! offset = e.offsetleft; if (e.offsetParent! = null) offset+= getleft (e.offsetParent); Rücksetversetzt;}Glücklicherweise hat mir der Browser die entsprechende Schnittstelle getBoundingClientRect geliefert. Diese Methode erschien zum ersten Mal im IE -Browser. Spätere Browser unterstützten auch diese Methode und es war perfekter. In IE können sie nur die linken, oberen, unteren und rechten Eigenschaften von Elementen bekommen, und die späteren modernen Browser können auch die Breite und Breite von Elementen erhalten.
| Chrom | Firefox (Gecko) | Internet Explorer | Oper | Safari |
|---|---|---|---|---|
| 1.0 | 3.0 (1,9) | 4.0 | (Ja) | 4.0 |
Es ist hier zu beachten, dass der Boden der Abstand zwischen der Unterseite des Elements und der Oberseite des Fensters ist und nicht die Unterseite der Position in CSS relativ zum unteren Rand des Fensters. In ähnlicher Weise ist das RIHGT -Attribut der Abstand zwischen dem rechten Element und der linken Seite des Fensters.
var box = document.getElementById ("box"); var pos = box.getBoundingClientRect (); box.innernhtml = "ober:"+pos.top+"links:"+pos.left+booth: "+pos.bottom+" rechts: "+pos.right+" widthTh: "+pos.width+" Höhe: "+"+"+"+"+"+"+"+"+"Originalartikel, bitte geben Sie den Nachdruck an: Nachdruck aus der Front-End-Entwicklung