我在使用允许多种文本大小的网站时遇到了一些问题。我有一个允许切换的脚本，一切都很好，但它没有将函数存储为 cookie，因此如果用户转到另一个页面，文本大小默认。
我不是很精通javascript，对cookie一无所知-想知道是否有人可以帮助我。
提前致谢。
这是我的脚本:
function loadjscssfile(filename, filetype) {
if (filetype == "js") { //if filename is a external JavaScript file
var fileref = document.createElement('script')
fileref.setAttribute("type", "text/javascript")
fileref.setAttribute("src", filename)
} else if (filetype == "css") { //if filename is an external CSS file
var fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref != "undefined") document.getElementsByTagName("head")[0].appendChild(fileref)
}
function removejscssfile(filename, filetype) {
var targetelement = (filetype == "js") ? "script" : (filetype == "css") ? "link" : "none" //determine element type to create nodelist from
var targetattr = (filetype == "js") ? "src" : (filetype == "css") ? "href" : "none" //determine corresponding attribute to test for
var allsuspects = document.getElementsByTagName(targetelement)
for (var i = allsuspects.length; i >= 0; i--) { //search backwards within nodelist for matching elements to remove
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr) != null && allsuspects[i].getAttribute(targetattr).indexOf(filename) != -1) allsuspects[i].parentNode.removeChild(allsuspects[i]) //remove element by calling parentNode.removeChild()
}
}
按钮代码:
<a onClick="removejscssfile('/css/med-font.css', '/css/lrg-font.css', 'css');" href="javascript:loadjscssfile('/css/sml-font.css','css')" id="sml">A</a>
<a onClick="removejscssfile('/css/sml-font.css', '/css/lrg-font.css', 'css');" href="javascript:loadjscssfile('/css/med-font.css','css')" id="med">A</a>
<a onClick="removejscssfile('/css/med-font.css', '/css/sml-font.css', 'css');" href="javascript:loadjscssfile('/css/lrg-font.css','css')" id="lrg">A</a>
最佳答案
此页面保存最后选择的样式表的文件名并将其保存到 cookie 中。加载时，页面会检查是否存在 cookie 并相应地更改样式表。
内容包含在一个包装器中，因此浏览器内容不会随着加载时样式的改变而发生明显变化，并且 noscript 标签确保没有启用 javascript 的人仍然可以看到该页面。
感谢 w3schools 的 cookie 代码以及来自 Sameera Thilakasiri 的 SO 回答:adding / removing css Files using JQUERY (虽然我在这里坚持使用原生js)
警告:未在所有浏览器中进行测试，脚本可能应该在页面外保留并在页面完全加载后启动。
希望这对您有所帮助!
<html>
<head>
<link id="docStyleSheets" rel="stylesheet" href="default.css" type="text/css">
</head>
<body>
<noscript>
<div id="divContentWrapper" style="display: none">
</noscript>
<ul id="ulCssChanges">
<li><a href="#small" onclick="setFontSize('small.css');return false;")>Small</a></li>
<li><a href="#medium" onclick="setFontSize('medium.css');return false;")>Medium</a></li>
<li><a href="#large" onclick="setFontSize('large.css');return false;")>Large</a></li>
</ul>
<noscript>
</div>
</noscript>
<script>
var Cookies = {
SetCookie: function (c_name, value, exdays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
},
GetCookie: function (c_name) {
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++) {
x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g, "");
if (x == c_name) {
return unescape(y);
}
}
}
}
if (Cookies.GetCookie("fontSize") != "") {
setFontSize(Cookies.GetCookie("fontSize"));
if (document.getElementById("divContentWrapper") != null) { document.getElementById("divContentWrapper").style.display = "block"; }
}
function setFontSize(styleSheetName) {
document.getElementById("docStyleSheets").href = styleSheetName;
Cookies.SetCookie("fontSize", styleSheetName, 60);
return false;
}
</script>
关于javascript - 为样式表切换器存储 js cookie，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11686849/