js脚本字体代码怎么写

使用JavaScript动态修改网页字体的几种方法包括：修改CSS样式、直接修改HTML元素的style属性、以及使用JavaScript库如jQuery等。下面将详细解释如何实现这些方法。

一、直接在JavaScript中修改CSS样式

通过JavaScript直接修改HTML元素的style属性，可以轻松实现字体的动态更改。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Font with JavaScript</title>
</head>
<body>
    <p id="myParagraph">This is a paragraph.</p>
    <button onclick="changeFont()">Change Font</button>
    <script>
        function changeFont() {
            document.getElementById('myParagraph').style.fontFamily = 'Arial, sans-serif';
            document.getElementById('myParagraph').style.fontSize = '20px';
        }
    </script>
</body>
</html>

在这个示例中，当用户点击按钮时，JavaScript会将段落的字体更改为Arial，并将字体大小更改为20px。

二、修改CSS类并使用JavaScript切换类

另一种方法是通过修改CSS类，并使用JavaScript切换类来实现字体的动态更改。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Font with JavaScript</title>
    <style>
        .newFont {
            font-family: 'Arial, sans-serif';
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p id="myParagraph">This is a paragraph.</p>
    <button onclick="changeFont()">Change Font</button>
    <script>
        function changeFont() {
            document.getElementById('myParagraph').classList.toggle('newFont');
        }
    </script>
</body>
</html>

此方法通过CSS类newFont定义字体样式，并在JavaScript中使用classList.toggle方法切换该类。

三、使用JavaScript库（如jQuery）

使用jQuery可以简化JavaScript的DOM操作。下面是使用jQuery修改字体的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Font with jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .newFont {
            font-family: 'Arial, sans-serif';
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p id="myParagraph">This is a paragraph.</p>
    <button id="changeFontBtn">Change Font</button>
    <script>
        $(document).ready(function() {
            $('#changeFontBtn').click(function() {
                $('#myParagraph').toggleClass('newFont');
            });
        });
    </script>
</body>
</html>

在这个示例中，使用jQuery的toggleClass方法，可以在点击按钮时切换段落的字体样式。

四、动态加载自定义字体

如果需要使用自定义字体，可以使用Google Fonts或其他字体库动态加载字体，并通过JavaScript应用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Font with Custom Font</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lobster&display=swap">
</head>
<body>
    <p id="myParagraph">This is a paragraph.</p>
    <button onclick="changeFont()">Change Font</button>
    <script>
        function changeFont() {
            document.getElementById('myParagraph').style.fontFamily = 'Lobster, cursive';
        }
    </script>
</body>
</html>

在这个例子中，首先从Google Fonts加载自定义字体，然后在JavaScript中应用该字体。

五、通过JavaScript创建和注入CSS

另一种方法是通过JavaScript动态创建和注入CSS样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Font with JavaScript</title>
</head>
<body>
    <p id="myParagraph">This is a paragraph.</p>
    <button onclick="changeFont()">Change Font</button>
    <script>
        function changeFont() {
            var style = document.createElement('style');
            style.innerHTML = `
                #myParagraph {
                    font-family: Arial, sans-serif;
                    font-size: 20px;
                }
            `;
            document.head.appendChild(style);
        }
    </script>
</body>
</html>

这种方法通过创建一个新的style元素，并将其添加到文档的head部分，实现字体的动态更改。

六、总结

通过JavaScript动态修改网页字体有多种方法，包括直接修改元素的style属性、使用CSS类和JavaScript切换类、使用JavaScript库如jQuery、动态加载自定义字体、以及通过JavaScript创建和注入CSS。每种方法都有其独特的应用场景和优势，开发者可以根据具体需求选择最合适的方法。

以上是关于如何使用JavaScript动态修改网页字体的详细解释。希望能帮助您更好地理解和应用这些技术。