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:135165Durchsuche

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(&#39;p&#39;)[0];    var stop = document.getElement.getElementsByTagName(&#39;p&#39;)[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

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：(Häufige Interviewfragen) js-Grundlagen von setTimeout bis zum asynchronen Prinzip von jsNächster Artikel：(Häufige Interviewfragen) js-Grundlagen von setTimeout bis zum asynchronen Prinzip von js

In Verbindung stehende Artikel

Mehr sehen