Die resize()-Methode in jQuery

Sheeraz Gul 15 Februar 2024

jQuery jQuery Resize

Die Methode resize() ist eine eingebaute Funktion in jQuery, die verwendet wird, wenn die Größe des Browserfensters geändert wird. Dieses Tutorial demonstriert die Verwendung der Methode resize() in jQuery.

Verwenden Sie die `resize()`-Methode in jQuery

Die Methode resize() funktioniert ähnlich wie die Methode onresize() des JavaScripts. Sie werden verwendet, um die Größe des Fensters zu ändern.

Die Syntax für die Methode resize() lautet:

$(selector).resize(function)

Der selector kann das Fenster sein. Und die Funktion ist ein optionaler Parameter, der aufgerufen wird, wenn die Methode resize() aufgerufen wird; diese Funktion wird auch Handler genannt.

Der Code im Handler sollte niemals auf der Anzahl der Aufrufe des Handlers basieren, da dieses Ereignis kontinuierlich gesendet werden kann, bis die Größenänderung durchgeführt wird. Der Rückgabewert für diese Methode sind die ausgewählten Elemente mit angepassten Attributen.

An dieser Stelle sei noch erwähnt, dass die Methode resize() eine jQuery-Version von on("resize", handler) ist. Das Ablösen ist also ähnlich mit der Methode .off("resize") möglich.

Versuchen wir es an einem Beispiel:

<!DOCTYPE html>
<html>
<head>
    <title> jQuery resize() method </title>
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
    <script>
        var x = 0;
        $(document).ready(function(){
            $(window).resize(function(){
                $("span").text(x += 1);
                var Window_Size = "Width = " + $(window).width() + "<br/>Height = " + $(window).height();
                $('#DemoParagraph').html(Window_Size);
            });
        });
    </script>
    <style>
        span {
        font-weight: bold;
        color: blue;
        font-size: 30px;
        }
    </style>
</head>
<body>
    <h2> jQuery resize() method </h2>
    <p> Resize your browser's window and see the Resize() method effect. </p>
    <p> You have resized the window <span> 0 </span> times.</p>
    <p id = "DemoParagraph"> </p>
</body>
</html>

Der obige Code verwendet die Methode resize(), um die Breite und Höhe des Fensters bei der Größenänderung anzuzeigen. Siehe Ausgabe:

Methode zur Größenänderung

Autor: Sheeraz Gul

Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.

LinkedIn Facebook

Verwenden Sie die resize()-Methode in jQuery

Verwenden Sie die `resize()`-Methode in jQuery