suchen

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是最好的语言
php是最好的语言Original
2018-08-03 09:57:135180Durchsuche

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>

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