Fatal编程技术网

未定义JavaScript-$

javascript

未定义JavaScript-$,javascript,Javascript,我有这段代码，但它有问题 未定义$ 这是下面的代码。我正试图根据窗口大小调整字体大小 <!DOCTYPE html> <html> <head> <style> .bold { font-weight: bold; } .normal { font-weight: normal; } </

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

未定义$

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

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


.bold{
字体大小：粗体；
}
.正常{
字体大小：正常；
}
hiiiii
$（窗口）.on（'resize'，function（））{
如果（$（窗口）.width（）>300）{
$（'测试'）.addClass（'正常'）；
$（“#test”）.removeClass（'bold'）；
}否则{
$（'#test'）.addClass（'bold'）；
$（'#test'）。removeClass（'normal'）；
}
})

$
函数是库的一部分

jQuery解决方案 如果要在项目中使用它，则需要导入它。 您可以下载此文件或使用Google CDN。第二个更好。 将这一行添加到功能之前的
标题
部分：


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


CSS解决方案
然而，在我看来，您根本不需要JS
如果窗口宽度小于300px，看起来您希望使文本更粗体

您可以使用CSS3实现这一点：


#test {
    // Any properties
    font-weight: normal;
}

@media (max-width: 300px)
{
    #test {
        font-weight: bold;
    }
}



如果视口宽度将小于300，则
#test
将变为正常。
您没有包括jQuery（或任何其他将使用
$
的库）。您的头中有jQuery脚本src。。。。

#test {
    // Any properties
    font-weight: normal;
}

@media (max-width: 300px)
{
    #test {
        font-weight: bold;
    }
}