JavaScript erhält die Fähigkeiten von Elementgröße und Größenoperation summary_javascript

1. Holen Sie sich den Inline-Stil des Elements

Code kopieren Der Code lautet wie folgt:

var obj = document.getElementById("test");
alarm(obj.height "n" obj.width);
// 200px 200px typeof=string zeigt nur den Wert im Stilattribut
an

2. Holen Sie sich den berechneten Stil

Code kopieren Der Code lautet wie folgt:

var obj = document.getElementById("test");
var style = null;
if (window.getComputedStyle) {
Style = window.getComputedStyle(obj, null); // Non-IE
} else {
Style = obj.currentStyle; // IE
}
alarm("width=" style.width "nheight=" style.height);

Hinweis: Wenn die Breite und Höhe des Elements nicht festgelegt sind, werden in Nicht-IE-Browsern die Standardbreite und -höhe zurückgegeben. Auto-String

unter IE zurückgeben

3. Holen Sie sich die Stile in die Tags

Code kopieren Der Code lautet wie folgt:

var obj = document.styleSheets[0]; // [object StyleSheetList] Anzahl der Stylesheetsvar Rule = null;// [object CSSRule]

if (obj.cssRules){
Rule = obj.cssRules[0]; // Nicht-IE [object CSSRuleList]
} sonst {
Rule = obj.rules[0]; // IE [object CSSRuleList]
}
alarm(rule.style.width);

cssRules (oder Regeln) können nur die Breite und Höhe von Inline- und Link-Stilen abrufen, jedoch keine Inline- und berechneten Stile.

Zusammenfassung: Die oben genannten drei CSS-Methoden zum Ermitteln der Elementgröße können nur die CSS-Größe des Elements ermitteln, nicht jedoch die tatsächliche Größe des Elements selbst. Fügen Sie beispielsweise Polsterungen, Bildlaufleisten, Ränder usw. hinzu.

4. Ermitteln Sie die tatsächliche Größe des Elements

1. clientWidth und clientHeight

Dieser Satz von Attributen kann die Größe des sichtbaren Bereichs des Elements sowie den vom Inhalt und der Auffüllung des Elements eingenommenen Platz ermitteln. Die Elementgröße wird zurückgegeben, es gibt jedoch keine Einheit. Wenn Sie die Einheit zwangsweise festlegen, z. B. 100em, wird weiterhin die Größe px zurückgegeben. (Wenn CSS abgerufen wird, erfolgt der Abruf entsprechend dem von Ihnen festgelegten Stil.) Für die tatsächliche Größe des Elements werden clientWidth und clientHeight wie folgt verstanden:

a. Rand hinzufügen, keine Änderung; b. Rand hinzufügen, keine Änderung; c. Erhöhen Sie die Bildlaufleiste. Der Endwert entspricht der Originalgröße abzüglich der Größe der Bildlaufleiste d. Erhöhen Sie die Polsterung. Der Endwert entspricht der Originalgröße plus der Polsterung




Code kopieren

Der Code lautet wie folgt:

#test{ Hintergrundfarbe: grün; Breite: 200px;

Höhe: 200px;

Rand: durchgehend 5 Pixel rot; /* Entspricht einem Verständnis, Ergebnis: 200.200 */
Marge: 10px; /* Entspricht b-Verständnis, Ergebnis: 200.200*/
Polsterung: 20px; /* Entspricht dem C-Verständnis, Ergebnis: 240.240*/
Überlauf: scroll; /* Entsprechend dem d-Verständnis ist das Ergebnis: 223, 223, 223=200 (CSS-Größe) 40 (Auffüllung auf beiden Seiten) - 17 (Breite der Bildlaufleiste) */
}
window.onload = function(){
var obj = document.getElementById("test");
alarm(obj.clientWidth "," obj.clientHeight);
};

Hinweis: Wenn keine CSS-Breite und -Höhe festgelegt sind, berücksichtigen Nicht-IE-Browser die berechnete Größe der Bildlaufleiste und des Abstands, während IE-Browser 0 zurückgeben (behoben in IE8).

2. scrollWidth und scrollHeight
Dieser Satz von Eigenschaften kann die Elementgröße des Bildlaufinhalts (sichtbarer Inhalt) ermitteln. Gibt die Elementgröße zurück, die Standardeinheit ist px. Wenn Sie keine CSS-Breite und -Höhe festlegen, werden die berechnete Breite und Höhe übernommen. Für die tatsächliche Größe des Elements werden scrollWidth und scrollHeight wie folgt verstanden:
1. Rahmen hinzufügen, verschiedene Browser haben unterschiedliche Interpretationen (das Folgende funktioniert normalerweise in IE8, aber nicht in IE6):
a) Firefox- und Opera-Browser vergrößern den Rahmen auf 220 x 220
b) IE-, Chrome- und Safari-Browser ignorieren die Rahmengröße 200x200
c) Der IE-Browser zeigt nur die Höhe seines ursprünglichen Inhalts an, 200 x 18 (IE8 hat dieses Problem behoben)
2. Fügen Sie die Polsterung hinzu. Der endgültige Wert entspricht der Originalgröße plus der Polsterungsgröße, 220 x 220, dh 220 x 38
3. Fügen Sie eine Bildlaufleiste hinzu. Der endgültige Wert entspricht der Originalgröße abzüglich der Größe der Bildlaufleiste, 184 x 184, dh 184 x 18
4. Festungen an den Außengrenzen hinzugefügt, keine Änderung.
5. Erhöhen Sie den Inhaltsüberlauf. Firefox, Chrome und IE erhalten eine kleinere Höhe als die ersten drei Browser und Safari erhält eine größere Höhe als die ersten drei Browser.

3. offsetWidth und offsetHeight
Dieser Satz von Eigenschaften kann die tatsächliche Größe des Elements zurückgeben, einschließlich Rahmen, Abstand und Bildlaufleisten. Gibt die Elementgröße zurück, die Standardeinheit ist px. Wenn Sie keine CSS-Breite und -Höhe festlegen, werden die berechnete Breite und Höhe übernommen. Für die tatsächliche Größe des Elements werden offsetWidth und offsetHeight wie folgt verstanden:
1. Fügen Sie einen Rahmen hinzu. Der Endwert entspricht der Originalgröße plus der Rahmengröße, also 220 2. Erhöhen Sie die Polsterung. Der Endwert entspricht der Originalgröße plus der Polsterungsgröße, also 220 3. Außengrenzfestungen hinzugefügt, keine Änderung; 4. Bildlaufleiste hinzufügen, keine Änderung, keine Verringerung; Um die Elementgröße zu ermitteln, ist es im Allgemeinen bequemer, Elemente auf Blockebene und Elemente mit festgelegten CSS-Größen zu verwenden. Dies ist besonders problematisch, wenn es sich um ein Inline-Element (Inline) oder ein Element ohne festgelegte Größe handelt. Daher wird empfohlen, bei der Verwendung darauf zu achten.

Code kopieren

Der Code lautet wie folgt:

test div element

#test{

Hintergrundfarbe: grün;

Breite: 200px;
Höhe: 200px;
Rand: durchgehend 10 Pixel rot; /*Ergebnis: 220.220*/
Rand: 10px; /*Ergebnis: 220.220 (keine Änderung)*/
Auffüllung: 10px; /*Ergebnis: 240.240*/
Überlauf: scroll; /*Ergebnis: 240.240 (keine Änderung)*/
}
window.onload = function(){
var obj = document.getElementById("test");
​​alert(obj.offsetWidth "," obj.offsetHeight);
};




5. Ermitteln Sie die umgebende Größe des Elements

1. clientLeft und clientTop erhalten die Rahmengröße

Dieser Satz von Attributen kann die vom Element festgelegte Größe des linken und oberen Rands ermitteln. Derzeit werden nur die Gruppen „Links“ und „Oben“ bereitgestellt, während „Rechts“ und „Unten“ nicht verfügbar sind. Wenn die Breite der vier Seiten unterschiedlich ist, kann sie direkt durch den berechneten Stil oder durch Subtraktion der oben genannten drei Gruppen ermittelt werden, um die Elementgröße zu erhalten. Die Breite des rechten Randes: obj.offsetWidth-obj.clientWidth-obj.clientLeft
Breite des unteren Rahmens: obj.offsetHeight-obj.clientHeight-obj.clientTop

Code kopieren

Der Code lautet wie folgt:

test div element

#test{

Hintergrundfarbe: grün;

Breite: 200px;
Höhe: 200px;
Rand oben: durchgehend 10 Pixel rot;s
Rand rechts: durchgehend 20 Pixel #00ff00;
Rand unten: einfarbig 30 Pixel blau;
Rand links: durchgehend 40 Pixel #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 ermitteln. Um die aktuelle Position eines Elements relativ zu seinem übergeordneten Element zu ermitteln, setzen Sie es am besten auf position:absolute; andernfalls haben verschiedene Browser unterschiedliche Interpretationen.
a. Setzen Sie die Position auf „absolut“, und alle Browser geben den gleichen Wert zurück. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

test div element

#test{
Hintergrundfarbe: grün;
Breite: 200px;
Höhe: 200px;
Position: absolut;
Links: 30px;
oben: 20px;
}
window.onload = function(){
var obj = document.getElementById("test");
Alert(obj.offsetLeft "," obj.offsetTop); // 30, 20
};

b. Das Hinzufügen von Rändern und Polsterungen hat keinen Einfluss auf die Position, aber das Hinzufügen von Außenpolstern wird sich summieren.

3. box.offsetParent erhält das übergeordnete Element
Wenn in offsetParent das übergeordnete Element ist, gibt Nicht-IE das Body-Objekt zurück und IE (IE6) gibt das HTML-Objekt zurück. Wenn zwei Elemente verschachtelt sind und das obere übergeordnete Element nicht position:absolute verwendet, gibt offsetParent das Body-Objekt oder das HTML-Objekt zurück. Daher ist die CSS-Positionierung beim Erhalten von offsetLeft und offsetTop sehr wichtig.
Wenn in vielen Ebenen die äußere Ebene positioniert wurde, wie erhalten wir dann den Abstand zwischen den Elementen der inneren Ebene und den Body- oder HTML-Elementen? Das heißt, ermitteln Sie die Position eines beliebigen Elements auf der Seite. Dann können wir eine Funktion schreiben, um eine Akkumulation durch kontinuierliches Zurückverfolgen nach oben zu erreichen.

Code kopieren Der Code lautet wie folgt:

box.offsetTop box.offsetParent.offsetTop; // Wenn es nur zwei Ebenen gibt

Funktion offsetLeft(element){
var left = element.offsetLeft; // Den Abstand der ersten Ebene ermitteln
var parent = element.offsetParent; // Holen Sie sich das erste übergeordnete Element
While (parent !== null) { // Wenn es ein vorheriges übergeordnetes Element
gibt            left = parent.offsetLeft; // Akkumulieren Sie den Abstand dieser Ebene
         parent = parent.offsetParent; // Das übergeordnete Element dieser Ebene abrufen
} //Dann setze die Schleife fort
Zurück nach links;
}

4.scrollTop und scrollLeft
Dieser Satz von Attributen kann die Größe des Bereichs ermitteln, in dem die Bildlaufleiste ausgeblendet ist (der Bereich über der Bildlaufleiste), und kann auch so eingestellt werden, dass dieser Bereich lokalisiert wird. Wenn Sie möchten, dass die Bildlaufleiste zur Anfangsposition scrollt, können Sie eine Funktion schreiben:

Code kopieren Der Code lautet wie folgt:

Funktion scrollStart (Element) {
If ( element.scrollTop != 0 ) {
          element.scrollTop = 0;
}
}

5. getBoundingClientRect()
Diese Methode gibt ein Rechteckobjekt zurück, das vier Eigenschaften enthält: links, oben, rechts und unten. Stellt den Abstand zwischen jeder Seite des Elements und der oberen bzw. linken Seite der Seite dar.

Code kopieren Der Code lautet wie folgt:

var box=document.getElementById('box'); // Element
abrufen Alert(box.getBoundingClientRect().top); // Der Abstand zwischen dem oberen Rand des Elements und dem oberen Rand der Seite
Alert(box.getBoundingClientRect().right); //Der Abstand zwischen der rechten Seite des Elements und der linken Seite der Seite
Alert(box.getBoundingClientRect().bottom); //Der Abstand zwischen dem unteren Rand des Elements und dem oberen Rand der Seite
Alert(box.getBoundingClientRect().left); //Der Abstand zwischen der linken Seite des Elements und der linken Seite der Seite

Hinweis: IE, Firefox3, Opera9.5, Chrome und Safari werden unterstützt. Im IE werden die Standardkoordinaten aus (2,2) berechnet, was dazu führt, dass der endgültige Abstand zwei Pixel mehr beträgt als bei anderen Browsern um ein kompatibles zu machen.

Code kopieren Der Code lautet wie folgt:

document.documentElement.clientTop; //Nicht-IE ist 0, IE ist 2
document.documentElement.clientLeft; //Nicht-IE ist 0, IE ist 2
functiongGetRect (Element) {
var rect = element.getBoundingClientRect();
var top = document.documentElement.clientTop;
var left= document.documentElement.clientLeft;
Zurück{
OBEN: RECT.TOP -TOP,
unten: rect.bottom - oben,
links Rechts: rect.right - left
}
}

Fügen Sie Außenränder, Innenränder, Rahmen bzw. Bildlaufleisten hinzu, um zu testen, ob alle Browser konsistent sind.

Das Obige ist der gesamte in diesem Artikel beschriebene Inhalt. Ich hoffe, er wird euch gefallen.