Heim > Artikel > Web-Frontend > Rufen Sie Fenstereigenschaften (Ansichtsfensterhöhe, Elementgröße, Elementposition) in JavaScript ab
Rufen Sie Fenstereigenschaften (Ansichtsfensterhöhe, Elementgröße, Elementposition) in JavaScript ab
- php是最好的语言Original
- 2018-08-03 09:57:135115Durchsuche
Fenstereigenschaften abrufen
Bildlaufentfernung der Bildlaufleiste anzeigen
Kompatibilität Es ist ziemlich verwirrend, zwei Werte gleichzeitig zu nehmen und hinzuzufügen, da es unmöglich ist, zwei Werte gleichzeitig zu haben
IE8 und niedriger sind nicht kompatibel
window.pageXOffset/pageYOffset
document.body/documentElement.scrollLeft/scrollTop
Kapselungskompatibilitätsmethode, bitte Das Scrollrad scrollt von getScrollOffset() weg
Um das Kompatibilitätsproblem zu lösen, haben wir Kapseln Sie eine Funktion:
<script type="text/javascript">
function getScrollOffset() {
if(window.pageXOffset) { x : window.pageXoffset, y : window.pageYoffset
}
else{
return { x : document.body.scrollLeft + document.documentElement.scrollLeft, y : document.body.scrollTop + document.documentElement.scrollTop,
}
}
}
</script>Ansichtsfensterabmessungen anzeigen
Gilt für Browser im seltsamen Modus (Abwärtskompatibilität)
Im Standardmodus ist jeder Browser kompatibel
IE und IE8 und niedriger sind nicht kompatibel
window.innerWidth/innerHeight
document.documentElement.clientWidth/clientHeight
document.body.clientWidth/clientHeight
Kapseln Sie die Kompatibilitätsmethode und geben Sie die Größe des Browser-Ansichtsfensters getViewportOffset() zurück
Um das Kompatibilitätsproblem zu lösen, Kapseln wir eine Funktion:
<script type="text/javascript"> function getSViewportOffset() { if(window.innerWidth) { return {
w : window.innerWidth,
h : window.innerHeight
}
}else{ if(document.compatMode ==="BackCompat") { return {
w : document.body.clienWidth,
h : document.body.clientHeight
}
}else{ return {
w : document.documentElement.clientWidth,
h : document.documrntElement.clientHeight
}
}
}
</script>Geometrische Abmessungen des Elements anzeigen
domEle.getBoundingClientRect();
Kompatibilität Sehr gut
Diese Methode gibt ein Objekt zurück, das die Attribute links, oben, rechts, unten und andere hat. links und oben stellen die X- und Y-Koordinaten der oberen linken Ecke des Elements dar, und rechts und unten stellen die X- und Y-Koordinaten der unteren rechten Ecke des Elements dar.
Die Höhen- und Breitenattribute werden in der alten Version von IE nicht angezeigt (künstliche Lösung: Subtrahieren Sie sie separat, um sie zu erhalten)
Die zurückgegebenen Ergebnisse sind nicht die gleichen. Nicht „in Echtzeit“
Lassen Sie die Bildlaufleiste scrollen
Es gibt drei Methoden das Fenster
Scroll(x,y) scrollt die Position auf der x- und y-Achse, scrollTo(x,y)
Lassen Sie die Bildlaufleiste zur aktuellen Position scrollen statt Distanz zu akkumulieren (diese beiden Methoden sind genau gleich)scrollBy(); kumulative Scrolldistanz
Die drei Methoden haben ähnliche Funktionen , und die Verwendung besteht darin, die X- und Y-Koordinaten einzugeben. Das heißt, lassen Sie die Bildlaufleiste zur aktuellen Position scrollen.
Unterschied: scrollBy() wird basierend auf den vorherigen Daten akkumuliert.
Beispiel: Verwenden Sie die Seitenpositionierungsfunktion scroll().
Beispiel: Verwenden Sie scrollBy(), um schnell zu lesen.
Übung:
Bauen Sie einen kleinen Reader, der Seiten automatisch umblättern kann.
<!DOCTYPE html><html><head>
<title>Document</title></head><body>文本内容 <p style="width:100px;height:100px;background-color:orange;color:#fff;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:200px;right:50px;opcity:0.5;">start</p>
<p style="width:100px;height:100px;background-color:orange;color:green;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:50px;right:50px;opcity:0.5;">stop</p></body><script type="text/javascript">
var start = document.getElement.getElementsByTagName('p')[0]; var stop = document.getElement.getElementsByTagName('p')[1]; var timer = 0; var key = true; //加锁，防止连续点start产生累加加速
start.onclick = function() {
if(key) {
timer = setInterval(function() {
window.scollBy(0,10);
},100);
key = false;
}
}
stop.onclick = function() {
clearInterval(timer);
key = true;
}</script>Sehen Sie sich die Abmessungen des Elements an (visuell)
-
dom.offsetWidth,dom.offsetHeight
Position des Elements anzeigen
dom.offsetLeft,dom.offsetTop
-
Für Elemente ohne positioniertes übergeordnetes Element werden Koordinaten relativ zum Dokument zurückgegeben. Gibt für positionierte übergeordnete Elemente die Koordinaten relativ zum nächstgelegenen positionierten übergeordneten Element zurück.
dom.offsetParent
-
Gibt das am nächsten positionierte übergeordnete Element zurück, andernfalls wird der Körper zurückgegeben, body.offsetParent gibt null zurück
Beispiel: Finden Sie die Koordinaten des Elements relativ zum Dokument getElementPosition
Verwandte Artikel:
js ruft die Browserhöhe ab Fensterhöhe Methode des Elementgrößen-Offset-Attributs
Javascript-Implementierung, um die Größe und Position der Fenstercodefreigabe zu erhalten
Ähnliche Videos:
JavaScript-Array-Objektattributlänge und zweidimensionales Array
Das obige ist der detaillierte Inhalt vonRufen Sie Fenstereigenschaften (Ansichtsfensterhöhe, Elementgröße, Elementposition) in JavaScript ab. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!