Question

我在"55\n34"：

中有这个小功能

head

它在工作。准备好文件。但我也希望窗口调整大小。

我已经尝试<script> fontsize = function() { var fontSize = $(".container").width() * 0.10; $(".container #link").css('font-size', fontSize); }; $(document).ready(fontsize); </script>，没有任何反应。

Answer 1

您的代码应该可以运行，但我们无法看到您的完整代码，因此您可能已将调整大小放在不能看到您的功能的不同范围内。以下将避免这个问题。

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

e.g。

<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/

Answer 2

尝试在页面就绪时使用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 3

请尝试使用此代码：

<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()处理程序，将其附加到窗口。回调函数将执行您的fontsize()函数。

以下是一个例子：https://jsfiddle.net/p0bw6f11/

Answer 4

您需要在DOM ready上配置事件

要么在准备功能中使用它，要么使用'on'

附加它

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

或

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

窗口大小调整jQuery函数

4 个答案: