javascript - 使用 jquery 和 cookie 增加/减少字体大小
问题描述
我需要一个脚本来增加和减少字体,但仍然是用户在返回站点时设置的值。我相信这应该由cookie来完成。我找到了一个例子,但是当我把它付诸实践时,什么也没有发生。当我单击 A + (increaseFont) 时,什么也没有发生。按照网站下方的脚本:https ://erika.codes/jquery/increase-decrease-page-font-size-jquery/
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
<div>
<span class="increaseFont">A+</span>
<span class="decreaseFont">A-</span>
<span class="resetFont">Aa</span>
</div>
<script>
var fontResize = {
textresize : function(){
var $cookie_name = "eip-FontSize";
var originalFontSize = $("html").css("font-size");
$.cookie($cookie_name, originalFontSize, { expires: 7, path: '/' });
// if exists load saved value, otherwise store it
if($.cookie($cookie_name)) {
var $getSize = $.cookie($cookie_name);
$("html").css({fontSize : $getSize + ($getSize.indexOf("px")!=-1 ? "" : "px")}); // IE fix for double "pxpx" error
} else {
$.cookie($cookie_name, originalFontSize);
//$.cookie($cookie_name, originalFontSize, {expires: 7, path: '/' });
}
// reset font size
$(".resetFont").bind("click", function() {
$("html").css("font-size", originalFontSize);
$.cookie($cookie_name, originalFontSize);
//$.cookie($cookie_name, originalFontSize, { expires: 7, path: '/' });
});
// function to increase font size
$(".increaseFont").bind("click", function() {
var currentFontSize = $("html").css("font-size");
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.05;
//var newFontSize = currentFontSizeNum + 2;
if (newFontSize, 11) {
$("html").css("font-size", newFontSize);
$.cookie($cookie_name, newFontSize);
//$.cookie($cookie_name, newFontSize, { expires: 7, path: '/' });
}
return false;
});
// function to decrease font size
$(".decreaseFont").bind("click", function() {
var currentFontSize = $("html").css("font-size");
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.95;
if (newFontSize, 11) {
$("html").css("font-size", newFontSize);
$.cookie($cookie_name, newFontSize);
//$.cookie($cookie_name, newFontSize, { expires: 7, path: '/' });
}
return false;
});
}
}
$(document).ready(function(){
fontResize.textresize();
})
</script>
*我发现另一个有效但没有cookie的示例,当页面更新时,值恢复正常:https ://jsfiddle.net/pairdocs/yq8Le0gn/4/
解决方案
- 您可以使用localStorage()来存储一个值。
- 将 CSS 设置
body
为font-size: 16px;
- 将所有其他元素设置为以相对单位定义的字体大小,例如 ie:
em
或rem
. - 将字体大小更改为
body
使用 JS 并查看所有其他元素相应调整。
使用两个-/+
按钮
const EL_body = document.querySelector("body");
const ELS_fontSize = document.querySelectorAll(".fontSize");
localStorage.fontSize = localStorage.fontSize || 16; // Read or default to 16px
function changeSize() {
EL_body.style.fontSize = `${localStorage.fontSize}px`;
}
ELS_fontSize.forEach(el => el.addEventListener("click", function() {
localStorage.fontSize = parseInt(localStorage.fontSize) + parseInt(el.value);
changeSize();
}));
// Change size on subsequent page load
changeSize();
<button class="fontSize" type="button" value="-2">A-</button>
<button class="fontSize" type="button" value="2">A+</button>
<h1>Lorem ipsum...</h1>
<p>Lorem ipsum...</p>
使用单选按钮
const EL_body = document.querySelector("body");
const ELS_fontSize = document.querySelectorAll("[name='fontSize']");
localStorage.fontSize = localStorage.fontSize || 16; // Read or default to 16px
function changeSize() {
ELS_fontSize.forEach(el => el.checked = el.value === localStorage.fontSize);
EL_body.style.fontSize = `${localStorage.fontSize}px`;
}
ELS_fontSize.forEach(el => el.addEventListener("change", function() {
localStorage.fontSize = el.value;
changeSize();
}));
// Change size on subsequent page load
changeSize();
[name="fontSize"]+span {
display: inline-block;
padding: 5px 10px;
border: 1px solid currentColor;
}
[name="fontSize"]:checked+span {
color: #0bf;
}
<label><input type="radio" name="fontSize" value="14" hidden><span>A-</span></label>
<label><input type="radio" name="fontSize" value="16" hidden checked><span>A</span></label>
<label><input type="radio" name="fontSize" value="18" hidden><span>A+</span></label>
<h1>Lorem ipsum...</h1>
<p>Lorem ipsum...</p>
使用选择框
const EL_body = document.querySelector("body");
const EL_fontSize = document.querySelector("#fontSize");
localStorage.fontSize = localStorage.fontSize || 16; // Read or default to 16px
function changeSize() {
EL_fontSize.value = localStorage.fontSize; // Update select value;
EL_body .style.fontSize = `${localStorage.fontSize}px`;
}
EL_fontSize .addEventListener("change", function() {
localStorage.fontSize = this.value;
changeSize();
});
// Change size on subsequent page load
changeSize();
<select id="fontSize">
<option value="14">Small</option>
<option value="16">Normal</option>
<option value="18">Big</option>
</select>
<h1>Lorem ipsum...</h1>
<p>Lorem ipsum...</p>
推荐阅读
- database - Cassandra 表中的最大分区数以及它如何依赖于磁盘空间?
- jenkins - Jenkins groovy 文件中的 File.exists() 不起作用
- forms - 如何在 Prestashop 1.6 上创建帐户时使用多个复选框
- python - 如何在 prometheus 中创建自定义指标?
- android - 如何修复此用户界面
- internet-explorer - Array.from 和 forEach 中的“箭头函数”在 IE 11 中不起作用,它在控制台中引发语法错误。如何解决?
- javascript - 如何从多个单选按钮中获取值并以动态形式打印?
- sql - 如何将现有 Blob 列上的 DEFAULT 值设置为 EMPTY_BLOB()
- javascript - 根据 id 选择多个元素以获得彼此相邻的最大组
- r - 我如何增加所需的分数并作为向量返回