📅 最后修改于: 2023-12-03 15:32:13.807000 🧑 作者: Mango
在网页开发中，有时我们需要让用户能够更改页面的字体大小，以便他们能更舒适地阅读内容。在这个过程中，jQuery 是一种非常有用的工具。
下面是一个简单的示例，展示如何使用 jQuery 在用户点击按钮时更改文本的字体大小。在这个例子中，我们增加或减小了文本框的字体大小，并将其存储在 cookie 中，以便在页面重新加载时保持其状态。
<!DOCTYPE html>
<html>
<head>
<title>更改字体大小示例</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
var fontSize = getCookie('fontSize') || '16px';
$('body').css('font-size', fontSize);
$('#increase').click(function() {
var newSize = parseInt($('body').css('font-size')) + 2;
$('body').css('font-size', newSize + 'px');
setCookie('fontSize', newSize + 'px', 30);
});
$('#decrease').click(function() {
var newSize = parseInt($('body').css('font-size')) - 2;
$('body').css('font-size', newSize + 'px');
setCookie('fontSize', newSize + 'px', 30);
});
});
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
</script>
<style>
button {
padding: 10px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>更改字体大小示例</h1>
<p>点击按钮增加或减小字体大小：</p>
<button id="increase">增大字体</button>
<button id="decrease">缩小字体</button>
<p>这是一些例文本。</p>
</body>
</html>
代码中使用了 jQuery 的 css() 方法来更改文本的字体大小。在页面加载时，我们首先检查 cookie 中是否存储有之前的字体大小设置，并将其应用于页面。然后，当用户点击 “增大字体” 或 “缩小字体” 按钮时，我们递增或递减当前的字体大小，并再次将其存储在 cookie 中。
此外，我们还编写了两个实用程序函数 setCookie() 和 getCookie()，用于设置和获取 cookie。这些函数被用于跨会话保持用户的字体大小设置。
在本示例中，我们通过使用 jQuery 提供了一种在网页中更改字体大小的方式。在实际项目中，你可能需要根据具体情况进行适当的修改。然而，本示例提供了一个基本框架，可以让你开始实现这一功能。