-1

我在允许多种文本大小的网站上遇到一些问题。我有一个允许切换的脚本，一切都很好，但它没有将函数存储为 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>
4

1 回答 1

2

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

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

感谢 w3schools 的 cookie 代码以及 Sameera Thilakasiri 的 SO 回答：使用 JQUERY 添加/删除 css 文件（尽管我在这里坚持使用原生 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>

于 2012-07-27T13:44:55.603 回答