Question

我在允许多种文字尺寸的网站上遇到了一些问题。我有一个脚本，允许切换和所有工作很好，但它不是将功能存储为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>

Answer 1

此页面保存所选最后一个样式表的文件名并将其保存到cookie中。加载后，页面会检查cookie是否存在并相应地更改样式表。

内容包含在包装器中，因此在加载时更改样式时，浏览器内容没有明显变化，并且noscript标签用于确保没有启用javascript的人仍然可以看到该页面。

感谢w3schools的cookie代码以及来自Sameera Thilakasiri的这个答案：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>

为样式表切换器存储js cookie

1 个答案: