我的页面标题栏有一个 + 和 - 用于增大和减小字体(使用下面的函数)...
这一切都工作正常。我将新的字体大小值存储在 cookie 中。
期望的结果是，如果您 a) 刷新页面，或 b) 转到网站上的其他页面，它会将字体大小设置为存储的内容...但是，情况并非如此。
这是我的代码位...(使用 script.js 文件)
var resize = new Array('.resizable');
$(document).ready(function() {
resize = resize.join(',');
var resetFont = $(resize).css('font-size');
$(".reset").click(function(){
$(resize).css('font-size', resetFont);
setFontSizeCookieValue(resetFont);
});
//increases font size when "+" is clicked
$(".increase").click(function(){
event.preventDefault();
changeFontSize(true);
return false;
});
//decrease font size when "-" is clicked
$(".decrease").click(function(){
changeFontSize(false);
return false;
});
// set the page font size based on cookie
setPageInitialFontSize();
});
function setPageInitialFontSize() {
var currentSize = $(resize).css('font-size');
if (currentSize !== getFontSize()) changeFontSize();
};
// font size changer
function changeFontSize(increase) {
var currentFontSize = getFontSize(); //getFontSize gets the cookie value or, if not set, returns 16
var currentFontValue = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSize;
if (increase !== undefined) newFontSize = Math.floor((increase) ? currentFontValue * 1.2 : currentFontValue * 0.8);
$(resize).css('font-size', newFontSize);
setFontSizeCookieValue(newFontSize);
};
我没有显示“cookie”代码调用(设置和获取)，因为它们工作正常，设置/获取 cookie 值。
当您单击+或-按钮时，它们会使用正确的参数值调用changeFontSize函数。当页面加载/刷新时，setPageInitialFontSize() 被调用...
单步执行 setPageInitialFontSize，它使用 getFontSize 调用 (19) 测试当前大小 (16px)，并流经changeFontSize，它执行了它应该执行的所有操作，但它就像
$(resize).css('font-size', newFontSize);
实际上并没有在这里做任何事情...
所以我可以使用任何帮助来尝试找出为什么这不起作用......
最佳答案
我想这就是您想要实现的目标，使用此代码或按照您的代码进行操作，看看您缺少什么，因为我在您的代码中看不到 cookies 部分，请在此处检查工作代码 https://jsbin.com/wofogejiye/edit?html,js,console,output
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Increase and Decrease Font Using Jquery and CSS</title>
<script type="text/javascript" language="javascript"
src="http://code.jquery.com/jquery-latest.js"><
/script>
<script type="text/javascript">
</script>
</head>
<body>
<input type="button" class="increase" value=" + ">
<input type="button" class="decrease" value=" - "/>
<input type="button" class="resetMe" value=" = ">
<div>Click Respected Buttons to Increase or Decrease the Font </div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(document).ready(function(){
var originalSize = getFontSizeLocalStorage()
// reset
$('div').css('font-size', originalSize);
$(".resetMe").click(function(){
$('div').css('font-size', originalSize);
});
$('div').css('font-size');
// Increase Font Size
$(".increase").click(function(){
var currentSize = getFontSizeLocalStorage()
var currentSize = parseFloat(currentSize)*1.2;
$('div').css('font-size', currentSize);
addToLocalStorage(currentSize)
return false;
});
// Decrease Font Size
$(".decrease").click(function(){
var currentSize =getFontSizeLocalStorage()
var currentSize = parseFloat(currentSize)*0.8;
$('div').css('font-size', currentSize);
addToLocalStorage(currentSize)
return false;
});
});
function addToLocalStorage(fontSize){
window.localStorage.setItem("fontSize",fontSize)
}
function getFontSizeLocalStorage(){
if( window.localStorage.getItem("fontSize")){
return window.localStorage.getItem("fontSize")
}
return $('div').css('font-size')
}
</script>
关于javascript - 页面刷新时字体调整大小不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59651926/