jQuery window 调整大小的功能

Question

我在head中有这个小功能：

<script>
    fontsize = function() {
        var fontSize = $(".container").width() * 0.10;
        $(".container #link").css('font-size', fontSize);
    };
    $(document).ready(fontsize);
</script>

它正在工作。文档准备就绪。但我也想 window 调整大小。

我试过 $(window).resize(fontsize);，没有任何反应。

Answer 1

尝试在页面就绪时使用 on 方法：

 fontsize = function() {
        var fontSize = $(".container").width() * 0.10;
        $(".container #link").css('font-size', fontSize);
    };
   fontsize();
   $(window).on('resize',fontsize);

https://jsfiddle.net/Lpgc0mmf/2/

Answer 2

试试这个代码：

<script>
(function($) {

    fontsize = function() {
        var fontSize = $(".container").width() * 0.10;
        $(".container #link").css('font-size', fontSize);
    };

    fontsize();

    $(window).on('resize', function() {
        fontsize();
    });

})(jQuery);
</script>

它利用 jQuery 中的 on() 处理程序，将其附加到 window。回调函数将执行您的 fontsize() 函数。

举个例子：https://jsfiddle.net/p0bw6f11/

Answer 3

您需要在 DOM 就绪时配置事件

要么在就绪函数中使用它，要么使用 'on'

附加它

jQuery(document).ready(function() {
checkWidth();
$(window).resize(checkWidth);
});

或

$(window).on('resize',function(){....})

Answer 4

您的代码应该可以工作，但我们看不到您的完整代码，因此您可能将调整大小放在了看不到您的函数的不同范围内。以下将避免该问题。

快捷方式：使用一个 window resize 处理程序，但触发初始 resize 事件。

例如

<script>
    $(window).resize(function() {
        var fontSize = $(".container").width() * 0.10;
        $(".container #link").css('font-size', fontSize);
    }).trigger("resize");
</script>

如果您的代码不在 body 元素的末尾，并且您声明它在 head 元素中，则您的代码应该也被包装在文档就绪处理程序中以确保选择器不会失败。

<script>
    $(function(){
        $(window).resize(function() {
            var fontSize = $(".container").width() * 0.10;
            $(".container #link").css('font-size', fontSize);
        }).trigger("resize");
    });
</script>

注： $(function(){ YOUR CODE });只是$(document).ready(function(){ YOUR CODE });

的快捷方式

JSFiddle: https://jsfiddle.net/TrueBlueAussie/6b7us88f/

jQuery window 调整大小的功能

jQuery function on window resize

jquery

window-resize

document-ready