Question

我有这段代码，但它有问题

$未定义

这是下面的代码。我正在尝试根据窗口大小调整字体重量

<!DOCTYPE html>
<html>

    <head>
        <style>
        .bold {
            font-weight: bold;
        }

        .normal {
            font-weight: normal;
        }
        </style>
    </head>

    <body>
        <div id="test" class="normal">hiiiii</div>
        <script>
        $(window).on('resize', function() {
            if ($(window).width() > 300) {
                $('#test').addClass('normal');
                $('#test').removeClass('bold');
            } else {
                $('#test').addClass('bold');
                $('#test').removeClass('normal');
            }
        })
        </script>
    </body>

</html>

Answer 1

$个函数是jQuery库的一部分。

jQuery解决方案

如果要在项目中使用它，则需要导入它。您可以下载此文件或使用Google CDN。如果可取的话，第二个。在<{1>}部分之前功能

中添加此行：

head

JS解决方案

如果您不想使用jQuery，也可以将代码更改为vanilla JS以获得相同的结果。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

CSS解决方案

但是，在我看来，你根本不需要JS 。
如果窗口宽度小于300px，您似乎希望使文本更大胆。

您可以使用CSS3实现此目的：

window.onresize = function() {
    var element = document.getElementById('test');
    if (window.width > 300) 
    {
        element.classList.add('normal');
        element.classList.remove('bold');
    } 
    else 
    {
        element.classList.add('bold');
        element.classList.remove('normal');
    }
};

如果视口宽度将小于300，则#test { // Any properties font-weight: normal; } @media (max-width: 300px) { #test { font-weight: bold; } }将变为正常。

JavaScript - $未定义

1 个答案:

jQuery解决方案

JS解决方案

CSS解决方案