1. Holen Sie sich den Inline -Stil des Elements
Die Codekopie lautet wie folgt:
var obj = document.getElementById ("test");
alert (obj.height + "/n" + obj.width);
// 200px 200px typeof = String zeigt nur den Wert im Style -Attribut an
2. Holen Sie sich den kalkulierten Stil
Die Codekopie lautet wie folgt:
var obj = document.getElementById ("test");
var style = null;
if (window.getComputedStyle) {
style = window.getComputedStyle (obj, null); // nicht ie
} anders {
style = obj.currentStyle; // dh
}
alert ("width =" + style.width + "/nheigh =" + style.height);
Hinweis: Wenn die Breite und Höhe des Elements nicht eingestellt sind, werden die Standardbreite und Höhe in Nicht-IE-Browsern zurückgegeben. Geben Sie die automatische Zeichenfolge unter IE zurück
3. Holen Sie sich die Stile, die von <Link> und <Styles> -Tags geschrieben wurden
Die Codekopie lautet wie folgt:
var obj = document.stylesheets [0]; // [Object Stylesheetlist] Anzahl der Stilblätter <Link> var regel = null; // [Objekt -CSSrule]
if (obj.cssRules) {
regel = obj.cssrules [0]; // Nicht-IE [Objekt CSSRULELIST]
} anders {
regel = obj.rules [0]; // dh [Objekt CSSRULELIST]
}
Alert (Regel.Style.width);
CSSRULES (oder Regeln) können nur die Breite und Höhe von Inline- und Verbindungsstilen erhalten und können die Inline- und berechneten Stile nicht erhalten.
Zusammenfassung: Die obigen drei Methoden zum Erhalten von Elementgrößen können nur die CSS -Größe des Elements erhalten, können jedoch die tatsächliche Größe des Elements selbst nicht erhalten. Fügen Sie zum Beispiel innere Ränder, Scrollstangen, Grenzen usw. hinzu.
4. Holen Sie sich die tatsächliche Größe des Elements
1. Clientbreite und ClientHeight
Dieser Satz von Attributen kann die Größe des visuellen Bereichs des Elements und die Größe des Raums erhalten, der durch den Inhalt des Elements und die inneren Ränder besetzt ist. Gibt die Elementgröße zurück, aber keine Einheit, die Standardeinheit ist PX. Wenn Sie das Gerät mit Gewalt einstellen, z. B. 100EM, wird die Größe von PX weiterhin zurückgegeben. (Wenn Sie CSS erhalten, erhalten Sie es entsprechend dem Stil, den Sie festgelegt haben). Für die tatsächliche Größe eines Elements werden Clientbreiten und ClientHeight wie folgt verstanden:
A. Fügen Sie Grenzen ohne Änderungen hinzu;
B. Die Ränder ohne Veränderung erhöhen;
C. Erhöhen Sie die Bildlaufleiste, der Endwert entspricht der ursprünglichen Größe abzüglich der Größe der Bildlaufleiste.
D. Erhöhen Sie die innere Marge, der Endwert entspricht der ursprünglichen Größe plus der inneren Marge.
Die Codekopie lautet wie folgt:
<div id = "test"> </div>
#prüfen{
Hintergrundfarbe: Grün;
Breite: 200px;
Höhe: 200px;
Rand: solide 5px rot; / * entspricht einem Verständnis, Ergebnis: 200.200 */
Rand: 10px; /* Entsprechend B -Verständnis, Ergebnis: 200.200*/
Polsterung: 20px; /* Entspricht C -Verständnis, Ergebnis: 240,240*/
Überlauf: Scrollen; / * Entsprechend D -Verständnis, Ergebnis: 223,223,223 = 200 (CSS -Größe) + 40 (Grenzränder auf beiden Seiten) - 17 (Scroll -Stabsbreite) *//////////
}
window.onload = function () {
var obj = document.getElementById ("test");
Alert (obj.clientwidth + "," + obj.clientHeight);
};
Hinweis: Wenn die Breite und Höhe eines CSS nicht eingestellt sind, zählt der Nicht-IE-Browser die berechnete Größe der Bildlaufleiste und den Rand, während der IE-Browser 0 zurückgibt (IE8 wurde festgelegt).
2. Scrollwidth und Scrollheight
Dieser Satz von Eigenschaften kann die Elementgröße des Bildlaufinhalts (sichtbarer Inhalt) erhalten. Gibt die Elementgröße zurück, die Standardeinheit ist PX. Wenn keine CSS -Breite und -höhe eingestellt sind, wird die kalkulierte Breite und Höhe erhalten. Für die tatsächliche Größe des Elements werden Scrollwidth und Scrollheight wie folgt verstanden:
1. Fügen Sie Grenzen hinzu, verschiedene Browser haben unterschiedliche Erklärungen (das folgende ist in IE8 normal, aber IE6 funktioniert nicht richtig):
A) Firefox- und Opernbrowser erhöhen die Größe der Grenze, 220x220
b) dh, Chrom- und Safari -Browser ignorieren die Grenzgröße, 200x200
c) IE -Browser zeigt nur die Höhe seines ursprünglichen Inhalts 200x18 an (IE8 hat dieses Problem geändert)
2. Fügen Sie den inneren Rand hinzu, der Endwert entspricht der ursprünglichen Größe plus der inneren Margengröße 220x220 und IE beträgt 220x38
3. Fügen Sie die Bildlaufleiste hinzu, der Endwert entspricht der Originalgröße abzüglich der Bildlaufleistengröße 184x184, dh 184x18
4. Fügen Sie externe Daten hinzu, keine Änderungen.
5. Erhöhen Sie den Inhaltsüberlauf, Firefox, Chrome und dh die tatsächliche Inhaltshöhe, die Oper ist kleiner als die Höhe der ersten drei Browser, und Safari ist größer als die Höhe der ersten drei Browser.
3. Offsetwidth und Offseteight
Dieser Satz von Eigenschaften kann die tatsächliche Größe des Elements zurückgeben, einschließlich Grenzen, innerer Ränder und Bildlaufleisten. Gibt die Elementgröße zurück, die Standardeinheit ist PX. Wenn keine CSS -Breite und -höhe eingestellt sind, wird die kalkulierte Breite und Höhe erhalten. Für die tatsächliche Größe des Elements werden Offsetwidth und Offseteight wie folgt verstanden:
1. Fügen Sie den Rand hinzu, der Endwert entspricht der ursprünglichen Größe plus der Grenzgröße, die 220 beträgt.
2. Fügen Sie die innere Marge hinzu, der Endwert entspricht der ursprünglichen Größe zuzüglich der inneren Margengröße, die 220 beträgt.
3. Fügen Sie externe Daten hinzu, keine Änderungen;
4. Fügen Sie Scrollstangen hinzu, keine Änderungen und verringert sich nicht.
Um Elementgrößen zu erhalten, sind es im Allgemeinen Elemente auf Blockebene und es ist bequemer, die CSS-Größenelemente festzulegen. Es ist besonders problematisch, wenn es sich um ein Inline -Element oder ein Element handelt, das keinen Größensatz hat. Es wird daher empfohlen, bei der Verwendung aufmerksam zu achten.
Die Codekopie lautet wie folgt:
<div id = "test"> test divelel </div>
#prüfen{
Hintergrundfarbe: Grün;
Breite: 200px;
Höhe: 200px;
Rand: solide 10px rot; /*Ergebnis: 220,220*//
Rand: 10px; /*Ergebnis: 220,220 (keine Änderung)*/
Polsterung: 10px; /*Ergebnis: 240,240*/
Überlauf: Scrollen; /*Ergebnis: 240,240 (keine Änderung)*/
}
window.onload = function () {
var obj = document.getElementById ("test");
Alert (obj.offsetwidth + "," + obj.offseteight);
};
5. Holen Sie sich die umgebende Größe des Elements
1. ClientLeft und ClientTop erhalten eine Grenzgröße
Dieser Satz von Attributen kann die Größe des Elements den linken Rand und den oberen Rand erhalten. Derzeit sind nur linke und obere Gruppen verfügbar, und rechts und unten sind nicht verfügbar. Wenn die Breite der vier Seiten unterschiedlich ist, können Sie sie direkt über den berechneten Stil erhalten oder die oben genannten drei Gruppen verwenden, um die Elementgröße zu erhalten, um die Subtraktion zu erhalten.
Breite der rechten Grenze: obj.offsetwidth-obj.clientwidth-Obj.clientleft
Breite der unteren Grenze: obj.offseteightheight-Obj.ClientHeight-Obj.clienttop
Die Codekopie lautet wie folgt:
<div id = "test"> test divelel </div>
#prüfen{
Hintergrundfarbe: Grün;
Breite: 200px;
Höhe: 200px;
Grenze: Solid 10px rot; s
Grenzrechte: Solid 20px #00ff00;
Grenzboden: solide 30px blau;
Border-Links: Solid 40px #808080;
}
window.onload = function () {
var obj = document.getElementById ("test");
alert (obj.clientleft + "," + obj.clienttop); // 40,10
};
2. Offsetleft und Offsettop
Dieser Satz von Attributen kann die Position des aktuellen Elements relativ zum übergeordneten Element erhalten. Um die aktuelle Position des Elements relativ zum übergeordneten Element zu erhalten, setzen Sie es am besten in die Position der Position: absolut; Andernfalls haben verschiedene Browser unterschiedliche Erklärungen.
A. Setzen Sie die Position auf absolut, alle Browser geben den gleichen Wert zurück. wie:
Die Codekopie lautet wie folgt:
<div id = "test"> test divelel </div>
#prüfen{
Hintergrundfarbe: Grün;
Breite: 200px;
Höhe: 200px;
Position: absolut;
links: 30px;
Top: 20px;
}
window.onload = function () {
var obj = document.getElementById ("test");
Alert (obj.offsetleft + "," + obj.offsettop); // 30, 20
};
B. Das Hinzufügen des Randes und des inneren Randes beeinflusst die Position nicht, aber das Hinzufügen der äußeren Daten wird sich ansammeln.
3. Box.OffsetParent Holen Sie sich das übergeordnete Element
Wenn das übergeordnete Element selbst in OffsetParent <body> ist, gibt Nicht-IE ein Körperobjekt zurück, und IE (IE6) gibt ein HTML-Objekt zurück. Wenn zwei Elemente verschachtelt sind und die Positionierungsposition: Absolute für das übergeordnete Element nicht verwendet wird, gibt OffsetParent das Körperobjekt oder das HTML -Objekt zurück. Daher ist die CSS -Positionierung bei der Erlangung von OffsetLeft und Offsettop sehr wichtig.
Wenn in vielen Ebenen die äußere Schicht positioniert wurde, wie können wir dann den Abstand zwischen den Elementen in der inneren Schicht vom Körper oder HTML -Elementen erhalten? Das heißt, holen Sie sich den Ort eines beliebigen Elements von der Seite. Dann können wir Funktionen schreiben und sie erreichen, indem wir ständig nach oben zurückkehren, um Akkumulation zu erhalten.
Die Codekopie lautet wie folgt:
Box.Offsettop + box.offsetParent.offsettop; // Wenn es nur zwei Schichten gibt
Funktion OffsetLeft (Element) {
var links = element.offsetLeft; // Holen Sie sich die erste Schichtabstand
var parent = element.offsetParent; // Holen Sie sich das erste übergeordnete Element
while (übergeordnet! == null) {// Wenn es ein früheres übergeordnetes Element gibt
links += parent.offsetLeft; // Fügen Sie die Entfernungen dieser Schicht hinzu
parent = parent.offsetParent; // Erhalten Sie das übergeordnete Element dieser Ebene
} // Dann setzen Sie die Schleife fort
links zurückkehren;
}
4. Scrolltop und Scrollleft
Dieser Satz von Eigenschaften kann die Flächengröße der versteckten Bildlaufleiste (der Bereich über der Bildlaufleiste) erhalten oder so einstellen, dass sie auf diesen Bereich positioniert werden. Wenn Sie die Bildlaufleiste in die erste Position scrollen möchten, können Sie eine Funktion schreiben:
Die Codekopie lautet wie folgt:
Funktion Scrollstart (Element) {
if (element.scrolltop! = 0) {
element.scrolltop = 0;
}
}
5. GetBoundingClientRect ()
Diese Methode gibt ein rechteckiges Objekt mit vier Eigenschaften zurück: links, oben, rechts und unten. Es zeigt den Abstand zwischen jeder Kante des Elements und der oberen und linken Seite der Seite an.
Die Codekopie lautet wie folgt:
var box = document.getElementById ('box'); // Element bekommen
alert (box.getBoundingClientRect (). Top); // Der Abstand über dem Element befindet sich oben auf der Seite
alert (box.getBoundingClientRect (). rechts); // die Entfernung rechts vom Element von links von der Seite
alert (box.getBoundingClientRect (). unten); // Die Entfernung unter dem Element befindet sich oben auf der Seite
alert (box.getBoundingClientRect (). links); // die Entfernung links vom Element links von der Seite
Hinweis: IE, Firefox3+, Opera9.5, Chrome und Safari Support. In IE werden die Standardkoordinaten aus (2, 2) berechnet, was zu einem endgültigen Abstand von zwei Pixel mehr als bei anderen Browsern führt. Wir müssen kompatibel sein.
Die Codekopie lautet wie folgt:
document.documentElement.clienttop; // Nicht-i ist 0, dh 2 ist 2
document.documentElement.clientleft; // Nicht-i ist 0, dh 2 ist 2
functionGgetRect (Element) {
var rect = element.getBoundingClientRect ();
var top = document.documentElement.clienttop;
var links = document.documentElement.clientleft;
zurückkehren{
Oben: RECT.TOP - TOP,
unten: RECT.Bottom - oben,
links: rect.left - links,
rechts: rect.Right - links
}
}
Fügen Sie externe Kanten, innere Ränder, Ränder und Scroll -Balken hinzu, um zu testen, ob alle Browser konsistent sind.
Das obige ist alle in diesem Artikel beschriebenen Inhalte. Ich hoffe es kann dir gefallen.