如何在 jQuery 中使用 resize()函数？

在本文中，我们将学习 resize() 方法，它是 jQuery 提供的内置方法。此方法用于将事件侦听器绑定到resize事件。当浏览器窗口的大小改变其大小时触发此事件，无论是由用户还是由于其他原因。此方法还可用于触发元素上的调整大小事件。

请注意，当调整大小发生时，事件可能不会连续触发，并且可能只会在最后触发，因此不建议依赖事件来获得精确计数。

句法：

$(selector).resize( handler )

参数：此方法接受如上所述和如下所述的单个参数函数：

• handler：这指定了当 resize 事件发生时将调用的回调处理程序。可以在包含事件详细信息的回调函数中传递一个可选参数。

下面的例子说明了 jQuery 中的resize() 方法：

示例 1：

HTML

  

    
    
    
    

  

    
        GeeksforGeeks
    
      
    Explain resize() function in jQuery?
  
    
        Resize the window to get 
        the new height and width
    
      
    
        Current Window Height:
        
    
      
    
        Current Window Width:
        
    
  
    
        $(window).resize((eventData) => {
            console.log("Page has been resized!");
  
            // Get the event type from the
            // event data available to the
            // callback function
            console.log("Event Data type", eventData.type);
  
            // Update the values on the page
            $("#window-height").text($(window).height() + "px");
            $("#window-width").text($(window).width() + "px");
        });
    

  

输出：

示例 2：

HTML

  

    
    

  

    
        GeeksforGeeks
    
      
    Explain resize() function in jQuery?
  
    Resize the window to get a new font size
  
    
        Hello Geeks, this text will resize 
        depending on the page size
    
  
    
        function resizeFont() {
  
            // Find the font size on the basis of
            // the current window width
            let fontSize = $(window).width() * 0.1;
  
            // Update the font size
            $("#text").css("font-size", fontSize + "px");
        }
        resizeFont();
  
        // Use the resize method with the above
        // function as the callback
        $(window).resize(resizeFont);
    

  

输出：

参考： https://api.jquery.com/resize/